I have two pages, Dashboard and Quiz. Dashboard triggers an event which calls the useNavigate function with the state.

const nav = useNavigate();
const goToTest = (e)=>{

    e.preventDefault()

    nav('/student/Quiz',{state:{id:1}});
  }

In quiz, I then use useLocation to try and get the data but it doesn't seem to work.

function Quiz() {
  const {data} = useLocation();
  console.log(data);

If i don't destructure data in quiz, it shows some json data, but state is always null

hash: ""
key: "(a key was here)"
pathname: "/student/Quiz" (Dashboard and quiz are both in the same directory as student)
search: ""
state: null