I am trying to add a shadcn modal, <Modal/> is in server component and in modal component i am getting params to get an id and the condition is based on id, like if id is there then only open the modal

Modal is triggering, but its not showing and when i refresh i am getting hydration error

// main page (server component)
export default async function Page() {
  return(
     // other components 
    <Modal/>
)
} 

// modal (client component)
"use client"
import { useSearchParams } from "next/navigation";

export default function Modal(){
  const searchParams = useSearchParams();
  const [open, setOpen] = useState(!!searchParams.get("id"));

  return(
    <Dialog open={open} onOpenChange={() => setOpen(false)}>
      <DialogContent className="sm:max-w-[425px]">
        <DialogHeader>
          <DialogTitle>This is modal</DialogTitle>
          <DialogDescription>
            This is modal description
          </DialogDescription>
        </DialogHeader>
      </DialogContent>
    </Dialog>  
  )
}

// triggering modal via Link
"use client"
export default function (){
  return (
    // other components
    <Link href={`${pathname}?id=123`}>View Modal</Link>
)
}