Weird behaviour when using dialog inside sidebar

[huy1999dnnk]

I have a dialog add new and i am using it inside sidebar (all dialog and sidebar come from shadcn). The modal suppose to be in the middle of screen, but somehow it stuck on the top left of the screen

My dialog

 <Dialog>
      <DialogTrigger asChild>{children}</DialogTrigger>
      <DialogContent className="sm:max-w-[425px]">
        <DialogHeader>
          <DialogTitle>Edit profile</DialogTitle>
          <DialogDescription>
            Make changes to your profile here. Click save when you're done.
          </DialogDescription>
        </DialogHeader>
        <Form {...form}>
          <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col gap-4">
            <FormField
              control={form.control}
              name="name"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Workspace Name</FormLabel>
                  <FormControl>
                    <Input {...field} placeholder="Workspace Name" />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
            <Button type="submit" className="btn">
              Create Workspace
            </Button>
          </form>
        </Form>
        <DialogFooter>
          <Button type="submit">Save changes</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>

My sidebar

  <Sidebar collapsible="icon">
      <SidebarContent>
        <SidebarGroup>
          <SidebarGroupContent className="flex justify-between">
            <SidebarGroupLabel>Space</SidebarGroupLabel>
            <SidebarGroupLabel>
              <AddNewWorkspace>
                <span className="text-sm">Add New</span>
              </AddNewWorkspace>
            </SidebarGroupLabel>
          </SidebarGroupContent>
          <SidebarGroupContent>
            <SpaceTree />
          </SidebarGroupContent>
        </SidebarGroup>
      </SidebarContent>
      <SidebarContent>
        <SidebarGroup>
          <SidebarGroupLabel>Application</SidebarGroupLabel>
          <SidebarGroupContent>
            <SidebarMenu>
              {items.map((item) => (
                <SidebarMenuItem key={item.title}>
                  <SidebarMenuButton asChild>
                    <Link
                      to={{
                        pathname: item.url,
                      }}
                    >
                      <item.icon />
                      <span>{item.title}</span>
                    </Link>
                  </SidebarMenuButton>
                </SidebarMenuItem>
              ))}
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>
      </SidebarContent>
      <SidebarFooter>
        <NavUser
          user={{
            avatar: '',
            name: user?.username || 'Oops',
            email: '[email protected]',
          }}
        />
      </SidebarFooter>
    </Sidebar>

Any solution for this? Thanks

[huy1999dnnk]

sorry, this caused by wrong mix import, i import from both radix and ui/dialog