how to get data from own json file for each id and show inside the detail page for specific id

Question

how to get data from own json file for each id and show inside the detail page for specific id this code is not working.please put your suggestion about my mistakes.i need your help..please help me.

route is working successfully for each id but all data for specific id showing in a same page and this is same for all page.

Doctordata.js

let arrobj = [
    {
      id : 1,
      src : './images1/image23.jpg',
      d_name : "Abir Ghosh",
      d_info : "Gastroenterology",
      primary :"Book Appointment"
    },
    {
      id : 2,
      src : './images1/image11.jpg',
      d_name : "Soma Dutta",
      d_info : "Orthopaedics",
      primary :"Book Appointment"
    },
    {
      id : 3,
      src : './images1/image4.jpg',
      d_name : "Sudan Ghosh",
      d_info : "Orthopaedics",
      primary :"Book Appointment"
    },
    {
      id : 4,
      src : './images1/image3.jpg',
      d_name : "Madusudan Ghosh",
      d_info : "Gastroenterology",
      primary :"Book Appointment"
    },
    {
      id : 5,
      src : './images1/image198.jpg',
      d_name : "Sudan Das ",
      d_info : "Kidney Transplant, Urology",
      primary :"Book Appointment"
    },
    {
      id : 6,
      src : './images1/image50.jpg',
      d_name : "Sankari Kumari Ghosh",
      d_info : "Plastic Surgery",
      primary :"Book Appointment"
    },
    {
      id : 7,
      src : './images1/image51.jpg',
      d_name : "Anisul Aslam",
      d_info : "Kidney Transplant, Urology",
      primary :"Book Appointment"
    },
    {
      id : 8,
      src : './images1/doctor1.jpg',
      d_name : "Suman Das",
      d_info : "Kidney Transplant, Urology",
      primary :"Book Appointment"
    }
  ];
  export default arrobj;

App.js

import './App.css';
import {BrowserRouter as Router,Routes,Route} from 'react-router-dom';
import EachBlog from './EachBlog/EachBlog';


function App() {


  return (
    <>
    <Router>
      <Navbar />
      <Routes>
        <Route path="/readeachblog/:id" element={<EachBlog/>} exact></Route>
      </Routes>
      
      </Router>
    </>

  );
}

export default App;

Blog.js

import './Blog.css'
import Blogdata from './Blogdata';
import React, { useState } from 'react'
import { Link } from 'react-router-dom';
const Blog = () => {
    const [data, setData] = useState(Blogdata);
    const filterResult = (catItem) => {
        const result = Blogdata.filter((curData) => {
            return curData.title === catItem;
        });
        setData(result);
    }
    return (
        <>
            <div className='back'><b>OUR BLOGS</b></div>
            <div className='containerfluid'>
                <div className='rowy'>
                    <div className='colmd'>
                        <button className="primary1" onClick={() => filterResult('Nutrition and diet')}>Nutrition and diet</button>
                        <button className="primary1" onClick={() => filterResult('Orthopaedics')}>Orthopaedics</button>
                        <button className="primary1" onClick={() => filterResult('Cardiology')}>Cardiology</button>
                        <button className="primary1" onClick={() => filterResult('Urology')}>Urology</button>
                        <button className="primary1" onClick={() => filterResult('Neurology')}>Neurology</button>
                        <button className="primary1" onClick={() => filterResult('General Surgery')}>General Surgery</button>
                    </div>
                    <div className='=colm'>
                        <div className='row'>
                            {data.map((values) => {
                                const { id, title, cardtitle, cardtext, srcd } = values;
                                return (
                                    <>
                                    
                                        <div className='wrapper2' key={id}>
                                            <div className="card" >
                                                <img src={srcd} className="cardimgtop" alt=" " />
                                                <div class="cardbody">
                                                    <h6 className='title'>{title}</h6>
                                                    <h5 className="cardtitle"><b>{cardtitle}</b></h5>
                                                    <p className="cardtext">{cardtext}</p>
                                                    <Link to={`/readeachblog/${values.id}`}><button className="primary">Read More</button></Link>
                                                </div>
                                            </div>
                                        </div>
                                    </>
                                );
                            })}

                        </div>
                    </div>
                </div>
            </div>
        </>
    )
}
export default Blog;

EachBlog.js

import React,{useState,useEffect} from 'react'
import './EachBlog.css'
import { Link, useParams } from 'react-router-dom';
import Doctordata from '../DoctorSection/Doctordata'
const EachBlog = () => {
    const {id} = useParams();
    const [ data, setData ] = useState(Doctordata);
   
  return (
    <>
    {data.map((data)=>{
        return(
            <>
            <Link to={`/readeachblog/${data.id}`}>
           
            <div className='datadiv' key={data.id}>
            <img className='srcBlog' src={data.srcBlog} alt={data.id}/> 
            <h1 className='firstparah'>{data.firstparah}</h1>
            <p className='firstpara'>{data.firstpara}</p>
            <h1 className='secondparah'>{data.secondparah}</h1>
            <p className='secondpara'>{data.secondpara}</p>
            <h1 className='thirdparah'>{data.thirdparah}</h1>
            <p className='thirdpara'>{data.thirdpara}</p>
            <h1 className='forthparah'>{data.forthparah}</h1>
            <p className='forthpara'>{data.forthpara}</p>
            </div>
          
            </Link>
            </>
        )
   })}
   </>
  )
}

export default EachBlog