I am using the Link component from react router as follows

    <li><Link to={{
      pathname: "../photos",
      state: {
        id: props.id
      }
    }} className="nav-link active" >photos</Link></li>

I am using Link this way because I need to pass in some data to the linked component. The linked component exists on a route one level above the current route, hence the two dots and a slash ../ However, when clicked I'm not taken to a level above the current route, but rather /photos is appended to the end of the current route. If I use Link in this manner

<li><Link to="../photos" className="nav-link active" >photos</Link></li>

then it works as expected, but I am unable to pass data through. I don't understand why there is a discrepancy.

-----------------------EDIT--------------------------

Here is the solution Can not pass state with react router dom v6 beta, state is null