I am sending my props using state in from ContactCard to ContactDetails Page. But when using useLocation hook, i am receiving null in Location.state.

ContactCard.jsx

import React from 'react';
import { Link } from 'react-router-dom';

const ContactCard = (props) => {
    const { id, name, email } = props.contact;

    const removeId = (id) => {
        props.getDeleteId(id);
    }

    return (
        <>
            <div>
            <Link to={{ pathname: `/ContactDetails/${id}` }} state= {props.contact}  style={{ cursor: "pointer" }}>
                    <i className="bi bi-person-circle"></i>
                    <label className='p-1'>{name}</label>
                    <label>{email}</label>
                </Link>
                <i className="bi bi-trash ml-10" onClick={() => removeId(id)} style={{ cursor: "pointer", color: "red", marginLeft: "48px" }}></i>
            </div>
            <div className='ul'></div>
        </>
    );
}

export default ContactCard;

ContactDetails.jsx

import React from 'react';
import { useLocation } from 'react-router-dom';

const ContactDetails = () => {
    const location = useLocation();
    const { contact } = location.state || {};

    if (!contact) {
        return <div>No contact data available.</div>;
    }

    console.log(contact);

    return (
        <>
            <div>
                <div>{contact.name}</div>
                <div>{contact.email}</div>
            </div>
            <div className='ul'></div>
        </>
    );
};

export default ContactDetails;

Data in props.contact- {id: ‘ec49b94a-eebf-4111-8e7e-40ea1a72a92e’, name: ‘abc’, email: ‘[email protected]’}

I should be able to receive the props.contact data in location.state