getting blank page while fetching useState data from one page to another by using useNavigation and useLocation from react router

[Rkmv6374]

//header page functions

import { useNavigate } from 'react-router-dom'; const navigate = useNavigate();

const handleSearch=()=> { navigate("/hotels",{state:{person,destination,cal}}); }

//useState function items

const [person,setperson]=useState({ adults:1, children:0, room:1 });

const [cal, setCal] = useState([ { startDate: new Date(), endDate: new Date(), key: 'selection' } ]);

const [destination,setDestination] = useState("");

// these all data is transferred to another pages by this search button which is below

Search

// then we are directed to list.js page import { useState } from 'react'; import { useLocation } from 'react-router-dom';

const location = useLocation();
console.log(location);

const [destination,setDestination] = useState(location.state.destination);
const [cal,setCal] = useState(location.state.cal);
const [person,setperson]= useState(location.state.person);

// then this became white blank page why i am getting error!!!!!