reactjs - Link same page with different parameters react using link

Question

I want refresh page and send data using link but it don't work I am using a link to send me to same page but with different parameters but it is not work and it is not refresh ... what I should do?

When I click the link it change from link but it is not change in the page and does not refresh with the data does not change. What should I do?

<Link to={`/NewDetails/${news[arr].id}`}> read more </Link>

the js I'm using is

const NewDetails = () => {
  const { id } = useParams();
  const [newsDetail, setNewsDetail] = useState("");
  useEffect(() => {
    async function fetchMyAPI() {
      let news = await onGetNewsById(id);
      setNewsDetail(news);
    }
    fetchMyAPI();
  }, []);

  const [news, setNews] = useState("");
  useEffect(() => {
    async function fetchMyAPI() {
      let news = await onGetNews();
      setNews(news);
    }
    fetchMyAPI();
  }, []);

  const last_num = news.length;
  const last_3_num = news.length - 3;

  return (
    <div>
      <div>
        <NavBar />
      </div>
      <div className="row">
        <div className="NewsDetails_Section">
          <div className="text-center">
            <div className="imageDetailsBackground">
              <img className="ImageNewsDetails" src={Wallet} alt="bankimage" />
            </div>
          </div>
          <div className="text-center" dir='rtl'>
            <h1> {newsDetail.title} </h1>
          </div>
          <div className="Body_news_Details">
            <p className="text-center"> {newsDetail.content} </p>
          </div>
          <div>
            <div className="News_Details_" dir="rtl">
              {Object.keys(news.slice(last_3_num, last_num), NewsImage.slice(last_3_num, last_num)).map(arr => (

                <div className="NewSection_details" key={news[arr].id}>
                  <div className="ImageNews_Details">
                    <img className="ImageNews_Details" src={NewsImage[arr]} alt="bankimage" />

                  </div>
                  <div className="HeaderNews_Details">
                    <h4>{news[arr].title} </h4>
                  </div>
                  <div className="bodynews_details">
                    <p> {news[arr].content.slice(0, 100)}... </p>
                  </div>
                  <div className="ButtonNews_Details">
                    {/*
             <Link Redirect push to={`/NewDetails/${news[arr].id}`}> */}
                    <Link to={`/NewDetails/${news[arr].id}`}> read more</Link>
                  </div>
                </div>))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}