Hydration error because of sheet component.

[SharonIV0x86]

I have been using the shad cn's sheet component. The component is added to the navbar and whenever the sheet component is opened the below error is thrown.

In HTML, <div> cannot be a descendant of <p>.
This will cause a hydration error.

Below is the body of the code that is also given with the error.

 <Presence present={true}>
      <FocusScope asChild={true} loop={true} trapped={true} onMountAutoFocus={undefined} ...>
        <Primitive.div tabIndex={-1} asChild={true} ref={function} ...>
          <Slot tabIndex={-1} onKeyDown={function FocusScope.useCallback[handleKeyDown]} ref={function}>
            <SlotClone tabIndex={-1} onKeyDown={function FocusScope.useCallback[handleKeyDown]} ref={function}>
              <DismissableLayer role="dialog" id="radix-:r2:" aria-describedby="radix-:r4:" aria-labelledby="radix-:r3:" ...>
                <Primitive.div role="dialog" id="radix-:r2:" aria-describedby="radix-:r4:" aria-labelledby="radix-:r3:" ...>
                  <div role="dialog" id="radix-:r2:" aria-describedby="radix-:r4:" aria-labelledby="radix-:r3:" ...>
                    <DialogClose>
                    <SheetHeader>
                      <div className="flex flex-...">
                        <_c5>
                        <_c7>
                          <DialogDescription ref={null} className="text-sm te...">
                            <Primitive.p id="radix-:r4:" className="text-sm te..." ref={null}>
>                             <p id="radix-:r4:" className="text-sm text-muted-foreground" ref={null}>
>                               <div className="flex items-center flex-col gap-6">

And this code is the part of the sheet.tsx file added by the shad cn.

This is how my sheet component is defined/being used

<Sheet>
  <SheetTrigger asChild>
    <button className="text-gray-600">
      <svg className="h-5 w-5">
        <path d="M4 6h16M4 12h16M4 18h16" stroke="currentColor" />
      </svg>
    </button>
  </SheetTrigger>

  <SheetContent side="left">
    <SheetHeader>
      <SheetTitle>JasperBlog</SheetTitle>
      <SheetDescription>
        <Link href="/">Home</Link>
        <Link href="/about">About</Link>
        <Button>Login</Button>
        <Button>SignUp</Button>
      </SheetDescription>
    </SheetHeader>
  </SheetContent>
</Sheet>

An image is also attached for better understanding.

[TJennerjahn]

Had a similar problem and found this issue: #2309
TLDR: Try removing putting your content outside of the SheetDescription.