Sheet component won't close after being opened even with open and onOpenChange props

[Mohamed-1954]

I have this component, It's a shadcn/ui sheet component that I want to make it opened and closed when the button is clicked, the button I mean is the one that has the onClick event and takes the toggleOpen function, but once the sheet is opened it won't close until I click outside the Sheet or I press the close button inside the SheetContent.

Things I tried:

• When I console log the value of the "open" state before and after the setOpen action, it always shows me false in the console, even though it should be toggled (from true to false and vice versa) when the button is clicked, and I don't seem to find where is the problem.
• I tried to put the put the button inside the SheetTrigger component and give it the asChild prop but it still didn't work.
• I also tried a ternary condition, when the open state is false, the button will be inside the SheetTrigger component, and when it's true I put it inside the SheetClose Component, the only problem is that, the HamburgerMenu I created inside the button which is an animated svg disappears and a another cross svg takes it place, which I think comes standard inside the SheetClose component.

Here is the code to the component:

import {
    Sheet,
    SheetContent,
    SheetDescription,
    SheetHeader,
    SheetTitle,
} from "@/components/ui/sheet";
import { HamburgerMenu } from "./HamburgerMenu";
import { useState } from "react";

const Sidebar = () => {
    const [open, setOpen] = useState<boolean>(false);

    const toggleOpen = () => {
        setOpen((prev) => !prev);
    };

    return (
        <Sheet open={open} onOpenChange={setOpen}>
            <button onClick={toggleOpen} className="p-0 flex border-0 cursor-pointer bg-transparent ">
                <HamburgerMenu open={open} />
            </button>
            <SheetContent className="top-[3.5rem]" side={"left"}>
                <SheetHeader>
                    <SheetTitle>Are you absolutely sure?</SheetTitle>
                    <SheetDescription>
                        This action cannot be undone. This will permanently
                        delete your account and remove your data from our
                        servers.
                    </SheetDescription>
                </SheetHeader>
            </SheetContent>
        </Sheet>
    );
};

export default Sidebar;

[dev-ahmedfares]

you can wrap your link with
in nextjs it should look like this

<SheetClose asChild>
  <Link></Link>
</SheetClose>