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

[Aman Raj]

//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!!!!!