How to display a Sheet from MenuItem

[alamenai]

Hi ,

I have a DropDown Menu component that include and item and this item is responsible for displaying a Sheet:

"use client"

import { cn } from "@/lib/utils"
import { HelpCircle, MessageSquareText } from "lucide-react"
import { usePathname } from "next/navigation"
import { useState } from "react"

import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "./ui/dropdown-menu"
import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger } from "./ui/sheet"

export const HelpMenu = () => {
  const pathname = usePathname()

  const isHomePage = pathname.endsWith("/")

  const menuItems = [{ icon: <MessageSquareText size={18} />, text: "FAQ" }]

  const [openSheet, setOpenSheet] = useState(false)

  return (
    <DropdownMenu>
      <DropdownMenuTrigger className='outline-none'>
        <HelpCircle
          size={24}
          className={cn("cursor-pointer text-slate-950 focus-visible:ring-0", isHomePage && "text-white")}
        />
      </DropdownMenuTrigger>
      <DropdownMenuContent className='mr-16 mt-3 w-64 rounded-2xl px-2 py-4'>
        {menuItems.map((item, index) => (
          <Sheet key={index} open={openSheet} onOpenChange={(isOpen) => setOpenSheet(isOpen)}>
            <SheetTrigger asChild>
              <DropdownMenuItem
                className='flex items-center space-x-3 py-2 cursor-pointer'
                onClick={() => setOpenSheet(true)}
              >
                {item.icon}
                <span>{item.text}</span>
              </DropdownMenuItem>
            </SheetTrigger>
            <SheetContent>
              <SheetHeader>
                <SheetTitle>FAQ</SheetTitle>
                <SheetDescription>
                  Here you can find answers to frequently asked questions.
                </SheetDescription>
              </SheetHeader>
            </SheetContent>
          </Sheet>
        ))}
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

However, it does not behave as expected.

In the first click on the MenuItem , the Sheet displays and disappeared. Then when I click again on Help icon, it displays the Sheet.

9bddd138-b3c6-481a-b347-8c41c360d516.webm