I am having issues with sending props through React Router. I am using Typescript

Question

I am trying to send props through React router using the useLocation() hook. This is the code to send the props in a state:

<Link
  to={{
    pathname: `/products/${product.id}`,
    state: { id: 7, color: "green" },
  }}
  data-tip="Quick View"
>
  <i className="fa fa-eye"></i>
</Link>

And the receiving component has the following code:

const location = useLocation();
console.log("location", location);

The console is showing the location to be undefined. Any idea what the issue here can be?

It is working fine when I am doing this using useNavigate() hook, but I am trying to do it using <Link> tags.

The error I am getting is: Type '{ pathname: string; state: { id: number; color: string; }; }' is not assignable to type 'To'. Object literal may only specify known properties, and 'state' does not exist in type 'Partial<Path>'.