DropdownMenu can't be opened again when I close Dialog, why?

[andreibade]

'use client'

import { useState } from "react"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { ChangePasswordDialog } from "./ChangePassword"
import { Dialog, DialogTrigger } from "@/components/ui/dialog"

export function ProfileMenuComponent() {
  const [dialogMenu, setDialogMenu] = useState<string>("none");

  const handleDialogMenu = (): React.ReactElement | null => {
    switch (dialogMenu) {
      case "change-password":
        return <ChangePasswordDialog />
      default:
        return null;
    }
  };

  return (
    <Dialog>
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <Avatar className="ring-2 ring-primary ring-offset-2 ring-offset-background">
            <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
            <AvatarFallback>CN</AvatarFallback>
          </Avatar>
        </DropdownMenuTrigger>
        <DropdownMenuContent className="w-56 mt-1 mr-1">
          <DropdownMenuLabel>Settings Menu</DropdownMenuLabel>
          <DropdownMenuSeparator />
          <DropdownMenuGroup>
            <DropdownMenuItem>Profile</DropdownMenuItem>
            <DropdownMenuSub>
              <DropdownMenuSubTrigger>Security</DropdownMenuSubTrigger>
              <DropdownMenuSubContent>
                <DialogTrigger asChild>
                  <DropdownMenuItem onSelect={() => setDialogMenu("change-password")}>
                    Change Password
                  </DropdownMenuItem>
                </DialogTrigger>
                <DropdownMenuItem>Two-Factor Auth</DropdownMenuItem>
                <DropdownMenuItem>Device History</DropdownMenuItem>
              </DropdownMenuSubContent>
            </DropdownMenuSub>
            <DropdownMenuItem>Billing</DropdownMenuItem>
          </DropdownMenuGroup>
          <DropdownMenuSeparator />
          <DropdownMenuItem>
            Log out
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
      {handleDialogMenu()}
    </Dialog>
  )
}

So I open my dropdown menu, hover over Security option, click on Change Password, the dialog opens up, I close it and I can't open the dropdown menu again. Why?