I've tried making tons of small changes to this code snippet (extra curly braces, changing ':' to '=' in the Link component code, and still location.state is null is on the ReportEdit component I'm trying to pass state to. Is this not something that is possible in React Router Dom 6.2.1?

Here's the code

Component drawing the link

<Link 
  to={`/report/${report.id}/edit`}
  state={{hi: "hi"}}>
 <Button>
    Edit
 </Button>
</Link>

Linked component I want to pass state to

import { Form, Button } from 'react-bootstrap'
import { Link, useParams, useLocation } from 'react-router-dom'
import axios from 'axios';

const ReportEdit = props => {

  const [report, setReport] = useState([]);
  const [ rep_type, setRepType ] = useState(report.rep_type);
  const [ rep_count, setRepCount ] = useState(report.rep_count);

  let params = useParams()
  const location = useLocation()

  console.log(location.state) // <--- always 'null'

  const id = params.id

  //async function handleSubmit() {
    //let data = await axios.put(`http://localhost:3001/reports/${id}`)
   // if (data) {
     // console.log(data.data.report)
    //}
  //}

  return (
    <div>
      <Form onSubmit={e => handleSubmit(e)}>
        <Form.Group className="mb-1" controlId="rep_type">
          <Form.Control 
            type="text" 
            placeholder={props.rep_type}
            name="rep_type"
            value={rep_type}
            onChange={e => setRepType(e.target.value)} 
          />
        </Form.Group>

        <Form.Group className="mb-1" controlId="rep_count">
          <Form.Control 
            type="number" 
            placeholder={props.rep_count} 
            name="rep_count"
            value={rep_count} 
            onChange={e => setRepCount(e.target.value)} 
          />
        </Form.Group>
      <Button variant="primary" type="submit">Submit</Button>
    </Form>
  </div>
  )
}

export default ReportEdit;