How to pass JSON data using useNavigation Hooks in React Js?

Question

This is my Json file which I created in my app.

export const Data = [
    {
        id: 1,
        title: "Tilte 1",
        description: "Decription 1 Data",
    },
    {
        id: 2,
        title: "Tilte 2",
        description: "Decription 2 Data",
    }
];

This is my main file from where I navigate it. I use json file to display all the records on page. When I click on selected item it will get its id and navigate to another page, where i can get the data of selected item coming from json.

import React from "react";
import { Data } from "./JSON"
import { useNavigate } from 'react-router-dom'

const Home = () => {
    let naviagte = useNavigate();
    return (
<>


         {Data.map((data, key) => {
            return (
            <div class="card" >
                <div class="card-body">
                    <h5 class="card-title" key={key.id}>{data.title}</h5>
                    <p class="card-text">{data.description}</p>
                    <button onClick={() => naviagte(`/service/${data.id}`)}>{data.title} </button>
                </div>
            </div>
            );
          })}
     </>

    )
}
export default Home;

When I navigate to another page where I want to display all data regarding the selected id. It shows only id not all data.

import React, {useState, useEffect} from "react";
import { Data } from "../home/JSON"
import { useParams } from "react-router-dom";

const Service = () => {

    const { id } = useParams();

    const [data, setData] =useState('');
    console.log("check", data);
  
     useEffect(() => {
      setData (Data.map((_data) => _data.id === id ))
     }, [id])


    return(
        <>
{id}
{data.title}
{data.description}
        </>
    )
}

export default Service;

Please guide me what I miss here. Thanks in Advance