why is my state variable undefined for props.location.state? [closed]

I am transferring data from one page to another using Link. I can get the data on the new page as well which I am checking using a console. The problem is, I am not able to set the initial state variable using this data using useState. Below is my code.

export default function myFunc(props) {
  const { myData, setMyData } = useState(props.location.state);
  // const { myData, setMyData } = useState({...props.location.state}); // This doesn't work either
  console.log('props here', props.location.state); // see the required object
  console.log('myData here', myData); // get undefined instead of the required object

Why am I getting undefined for myData?


You should use rectangular bracket in useState declaration and use useEffect hook to show myData initial value. Something like:

  const [myData, setMyData] = useState(props.location.state);
  console.log('props here', props.location.state);

  useEffect(() => {