Reactjs – Navigate not detected in a sub-componnent with react routing

Hello I’m having a little problem when trying to change route in my web application.

In this sub-ComponnentI’m calling a Link or a navigate and the url of my app change but the page is not redirected

//List_item.js
function ItemList(itemList){


console.log(itemList)
const listItems = itemList['data'].map((item) => (

<li key={item} className='rows'>
  <AiFillFileText style={{ fontSize: '30px' }} />
  <div className='content'>
    <div className='detail' style={{ overflow_y: 'scroll' }}>
      <span className='name'>{item}</span>
    </div>
  </div>
  <div hidden={true} id='check'>
    <BsCheckLg style={{ fontSize: '30px', color: 'green' }} />
  </div> 
  <Link to={"rules/" + item} refresh="true" > CLick me </Link>
</li>
));

return (
  <div>
      <ul id='span-list'>{listItems}</ul>
  </div>

 );
};
export default ItemList;

I am calling it in its parent Commponnent Home like this :

\Home.js
    import { BsFillCloudUploadFill, BsCheckLg } from "react-icons/bs";
     import {  AiFillFileText  } from "react-icons/ai";
    import { useState } from "react";
    import {Watch} from "react-loader-spinner";
    import ReactDOM from 'react-dom/client';
    import ItemList from './List_item';
    import { useNavigate, BrowserRouter as Router } from 'react-router-dom';

    function Home() {
      const [ file, setFile ] = useState(null);
      let [loading, setLoading] = useState(true);
      const [ msg, setMsg ] = useState(null);
      let navigate = useNavigate();
      function redirect(){
        navigate('/rules');
  
      }
    function handleUpload() {
    if(!file){
    setMsg("No file Selected");
    return;
    }
    const fd = new FormData();
    fd.append('file',file);

    setMsg("Uploading...");
    setLoading(!loading)
    fetch("http://localhost:3500/upload",{
      method: "POST",
      body: fd,
    })
    .then(res =>  {
      if(!res.ok){
        throw res.statusText;
      }

      setMsg("Upload successful");
      document.getElementById("check").style.display = "block";
      setLoading(!loading)
      return res.json();

    })
    .then(data => {
      const itemList = data['data']
      console.log(itemList)
      const spanList = ReactDOM.createRoot(document.getElementById('span-list'));
      spanList.innerHTML = "";
      spanList.render(
        <Router>
    <ItemList
            data={itemList}
        />
      </Router>
      )
      setLoading(true);
       
  
    })
    .catch(err=>{
      setMsg("Upload failed");
      console.error(err);
    });
    }
       return (
    
    <div className="App">
    <div className='wrapper'>
      <h1>Uploading Files</h1>
      <div onClick={()=>{
          const fileInput = document.querySelector("input");
          fileInput.click();
      }} className='wrapper2'>
          <BsFillCloudUploadFill style={{
            fontSize:"50px",
            color:"black",
            }}></BsFillCloudUploadFill>

          <input hidden={true} onChange={(e)=> {setFile(e.target.files[0])
          document.querySelector("section").style.display = "block";
          if(e.target.files[0].name !== undefined)
            document.querySelector(".name").innerText= e.target.files[0].name;  
          
          
          } } type="file"/>
      </div>
      <section hidden={true} >
      <div id='span-list'>
      <li className='rows' >
          <AiFillFileText style={{
            fontSize:"30px",
          }}></AiFillFileText>
          <div className='content'>
            <div className='detail'  style={{overflow_y:"scroll"}}>
              <span className='name'>fikjdejefhjlfcjlchejklle_01</span>
            </div>
          </div>
          <div  hidden={true} id="check">
          <BsCheckLg style={{
            fontSize:"30px",
            color:"green",
          }}></BsCheckLg>
          </div>
          
        </li>
        
      </div>
  
      </section>
      <div style={{
        display:'flex',
        alignContent:'center',
        justifyContent:'center',
      }}>
      <Watch
                height="80"
                width="80"
                radius="48"
                ariaLabel="watch-loading"
                wrapperStyle={{}}
                wrapperClassName=""
                color='black'
                visible={!loading}
              />
      </div>
      <div style={{
        display:'flex',
        alignContent:'center',
        justifyContent:'center',
      }}> <button className="upload" onClick={ handleUpload }>Upload</button></div>
     
   <div style={{
        display:'flex',
        alignContent:'center',
        justifyContent:'center',
      }}>

      <button className="upload" onClick= {redirect}>redirect</button></div>
     
     <div style={{
          display:'flex',
          alignContent:'center',
          justifyContent:'center',
        }}>
      
   
    { msg && <span style={{
    marginTop:"15px",
    color:'black',
    }}>{msg}</span> }
   </div>
    </div>   
    </div>

And my router is defined as

import './App.css';
import Home from './Componnent/Home';
import Test from './Componnent/List_item copy';
import {BrowserRouter as Router, Route, Routes } from 'react-router-dom';

function App() {

  return (
    <Router>

      <Routes>
        <Route path='/' element= {<Home/>}>
        <Route path="rules" element= {<Test/>}></Route>
        </Route>
      </Routes>
    </Router>
  );
}

export default App;

How is it possible to render the new componnent when the url of the page change ?
Thank you for your help