Почему не передается state в другой компонент с помощью Link?

У меня прилетают данные с сервера в виде массива объектов, записываются в state и отображаются в виде таблицы. Последний элемент в строке таблицы является кнопка, обернутая в Link. В его props to я передаю state. При нажатии на кнопку я не могу получить state в другой компоненте. Как можно это исправить?

Здесь прописаны роуты:

import './App.css'
import TableData from './Moduls/TableData.jsx'
import AddTask from './Moduls/AddTask.jsx'
import {Routes, Route} from "react-router-dom"

function App() {
return (
  <Routes>
    <Route path="/" element={<TableData/>}/>
    <Route path="/project/:projectId/:projectNameOrder" element={<AddTask/>}/>
  </Routes>

);
}

export default App;

Здесь получаю данные с сервера, отображаю в виде таблицы и передаю state:

import React, {useEffect, useState} from 'react'
import TableContainer from "@mui/material/TableContainer";
import Table from "@mui/material/Table";
import TableHead from "@mui/material/TableHead";
import TableRow from "@mui/material/TableRow";
import TableCell from "@mui/material/TableCell";
import Paper from "@mui/material/Paper";
import {TableBody} from "@mui/material";
import Button from "@mui/material/Button";
import {Link} from "react-router-dom";

const TableData = () => {

  const data = [
    {id_project: 37, name_order: 'Создать модель', start_date: '15.11.2020', start_date_work: '17.12.2020', 
end_date: '30.12.2020'},
    {id_project: 40, name_order: 'Создать сборку ', start_date: '17.10.2021', start_date_work: '07.11.2021', 
end_date: '30.12.2021'},
    {id_project: 38, name_order: 'Создать модель', start_date: '15.11.2020', start_date_work: '17.12.2020',
end_date: '30.12.2020'},
    {id_project: 39, name_order: 'Создать сборку из деталей', start_date: '17.10.2021', 
start_date_work: '07.11.2021', end_date: '30.12.2021'}
  ]


  const [dataProject, setDataProject] = useState(data)

  // useEffect(() => {
  //    fetch('http://localhost:5001/api/projects/all')
  //        .then(response => response.json())
  //        .then(data => setDataProject(data))
  // }, [])

  console.log(dataProject)

  const style = {
    tableCell: {
      fontWeight: 'bold',
      fontSize: '16px'
    },
    button: {
      marginRight: '5px'
    },
    link: {
      textDecoration: 'none'
    }
  }

  return (
    <>
      <h1>
        Список проектов
      </h1>
      <TableContainer component={Paper} style={{marginTop: '10px'}}>
        <Table sx={{ minWidth: 650 }} aria-label="simple table">
          <TableHead>
            <TableRow>
              <TableCell style={style.tableCell}>Название проекта</TableCell>
              <TableCell style={style.tableCell}>Дата формирования</TableCell>
              <TableCell style={style.tableCell}>Дата начала работы</TableCell>
              <TableCell style={style.tableCell}>Дата окончания работы</TableCell>
              <TableCell style={style.tableCell}>Действия</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {dataProject.map((project, index) => (
              <TableRow key={index}>
                <TableCell>{project.name_order}</TableCell>
                <TableCell>{project.start_date}</TableCell>
                <TableCell>{project.start_date_work}</TableCell>
                <TableCell>{project.end_date}</TableCell>
                <TableCell>
                  <Link
                    style={style.link}
                    to={{
                      pathname: `/project/${project['id_project']}/${project['name_order']}`,
                      state: project
                    }}
                  >
                    <Button
                      variant="contained"
                      id={project['id_project']}
                      style={style.button}
                      onClick={(e) => console.log(e.target.id)}
                    >
                      Редактировать
                    </Button>
                  </Link>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </TableContainer>
    </>
  )

}

export default TableData

Здесь компонент, в котором не могу получить state:

import React from 'react'
import {useLocation} from "react-router-dom"

const AddTask = () => {
  const location = useLocation()
  console.log(location.state)

  return (
    <>
      <h1>Hello</h1>
    </>
  )

}

export default AddTask