So I used to pass data between different pages in react using the state inside the link component but now the props.history seems to be undefined. here is my router:

<Router>
        <Routes>
          <Route path="/auth/admin" exact element={<Login />} />
          <Route path="/admin" exact element={<AdminPage />} />
          <Route path="/admin/faculties" exact element={<Faculty />} />
          <Route path="/admin/addNewFaculty" exact element={<AddNewFaculty />} />
          <Route path="/admin/facultyEdit" exact element={<EditFaculty />} />
        </Routes>
</Router>

this is the link that I am using:

<Link
   to={{
         pathname: "/admin/facultyEdit",
         state: { id: item._id }
      }}
      style={{ marginRight: "10px" }}>

and this is what I am getting when trying to log the history in the faculty element:

console.log(this.props.history);

output: "undefined" Thank you in advance.