How to pass state values to another functional Components [duplicate]

Question

I'm trying to pass the datas from json-server to another components using Link react-router-dom

import React from 'react';
import {Link} from 'react-router-dom';
const Calendar = (props) => {
   
    return (
        <>
            <Link to={{
                pathname: '/update',
                state:{
                    values: props
                }
            }} >
            <div className="calendar-list m-3 rounded-sm shadow-lg h-24 cursor-pointer relative ">
               
                    <h2 className="h-10 pl-1 pt-2">{props.title}</h2>
                    <span className="font-bold absolute bottom-2 right-100 pl-2">{props.status}</span>
                    <span className="absolute bottom-2 right-2">{props.date}</span>
            </div>
            </Link>
        </>
    );
}

export default Calendar;

this is my UpdateForm where the props is headed

import React from 'react';

import {Link,useNavigate,useLocation } from 'react-router-dom';

const UpdateForm = () => {
    const location = useLocation();
    const values = location.state.values
    console.log(location)
    let navigate = useNavigate();

    const handleChange = (e)=>{
        console.log(e)
    }
    const handleSubmit = (e)=>{
       
     navigate('/')
            
           

    }

    return (
        <div className=" relative pt-6 max-w-sm mx-auto min-h-screen overflow-hidden inline-block  w-10/12 bg-white rounded-xl shadow-lg">
        <div className="header flex justify-center ">
            <div className='absolute top-7 left-3 cursor-pointer'>
                <Link to="/">Back</Link>
                </div>
            <div className="text-xl text-center font-medium text-black">Update</div>
        </div>

        <form className=" rounded px-8 pt-10 pb-8 mb-4" onSubmit={handleSubmit}>
            <div className="mb-4">
                <input name="title" className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"   type="text" placeholder="Title"  onChange={handleChange}/>
            </div>   
                <input name="date" className="shadow appearance-none border  rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline"   type="date" 
                 onChange={handleChange}/>

                <select className="shadow border  rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline" name="status" 
                onChange={handleChange}>
                    <option value="Pending">Pending</option>
                    <option value="On-going">On-going</option>
                    <option value="Done">Done</option>
                </select>
                <div className="float-right m-6">
            <button type="submit">
                Update
            </button>
        </div>
        </form>
       
    </div>

    );
}

export default UpdateForm;

already tried using the useLocation but it gives me state is null and says cannot read properties of null. I saw some answers here but they are all using class component and not hooks.