Not able to Pass information throught link in react route

Im not able to pass information using props through link in react route. I tried to pass the current contact got throught a component in the contactcard and passing the same prop to contactdetails but im not able to fetch the onbject sent by me in the contact details getting undefined when consoling the props

import React, { useState } from 'react';
import user from "../images/user.png";
import { Link } from "react-router-dom";

function ContactCard(props) {
  const [data,setData]=useState(props.contact)
  const { id, name, email, mobile } = props.contact;

  return (
    <div>
      <div className="item">
        <div className="ui avtar image">
          <img src={user} alt="user" />
        </div>
        <div className="content">
          <Link to={{pathname: `/contact/${id}`, state:{data: data}}}>
            <div className="header">{name}</div>
            <div>{email}</div>
            <div>{mobile}</div>
          </Link>
        </div>
        <i
          className="trash alternate outline icon"
          style={{ color: 'red', marginTop: '7px' }}
          onClick={() => props.clickHandler(id)}
        ></i>
      </div>
    </div>
  );
}

export default ContactCard;

import React from 'react';
import { useLocation } from 'react-router-dom';
import user from "../images/user.png";

function ContactDetails(props) {
    
    const location=useLocation();
    console.log(props,"props");
    const data=location.state?.data;
    console.log(data);
//   const { contact } = props.location.state;
//   const { id, name, email, mobile } = contact;

  return (
    <div className="main">
      <div className="ui card centered">
        <div className="image">
          <img src={user} alt="user" />
        </div>
        <div className="content">
          <div className="header">name</div>
          <div className="description">email</div>
          <div className="description">mobile</div>
        </div>
      </div>
    </div>
  );
}

export default ContactDetails;

import React, { useState, useEffect } from "react";
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import { v4 as uuid } from "uuid";
import './App.css';
import Header from "./Header";
import AddContact from "./AddContact";
import ContactList from "./Contactlist";
import ContactDetails from "./ContactDetails";

function App() {
  const LOCAL_STORAGE_KEY = "contacts";

  const [contacts, setContacts] = useState(
    JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY)) || []
  );

  const addHandler = (contact) => {
    console.log(contact);
    setContacts([...contacts, { id: uuid(), ...contact }]);
  };

  const removeContactHandler = (id) => {
    const newContactList = contacts.filter((contact) => {
      return contact.id !== id;
    });

    setContacts(newContactList);
  }

  useEffect(() => {
    localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(contacts));
  }, [contacts]);

  return (
    <div className="ui container">
      <Router>
        <Header />
        <div className="content">
          <Routes>
            <Route path="/" element={<ContactList contacts={contacts} getContactId={removeContactHandler} />} />
            <Route path="/add" element={<AddContact addHandler={addHandler} />} />
            <Route
              path="/contact/:id"
              element={<ContactDetails/>}
            />
          </Routes>
        </div>
      </Router>
    </div>
  );
}

export default App;

>Solution :

Maybe you should try passing the required value through the <Link></Link> in the following manner:

<Link to={} state={{ data: data }}></Link>

It appears that you’ve placed the state prop within the to prop’s value. In any case do let us know whether or not the change worked. Good luck!