Soo, im new on react js framework. im trying to make an navigation link. but when it clicked, it re-render the previous component . codes below

  import React, { Component } from 'react';
import {Card, Button , ListGroup }  from 'react-bootstrap'
import { Route, Link, BrowserRouter,Routes } from 'react-router-dom'
import Mappage from '../mapPage';
import Home from '../home';
import 'bootstrap/dist/css/bootstrap.min.css';
class FloorOne extends Component {
    state = { 
     }  
    render() { 
    //   const floors = [1,2,3,4,5,6,7];
        return (
           <BrowserRouter>
            <div className='cardContainer'>
            <ListGroup as ="ul" className='floorCard'>
         
                <ListGroup.Item as ="li">
            
                   <Link to="/mapPage"> link to map</Link>
               
                </ListGroup.Item>
                <ListGroup.Item as ="li">
                    <Link to="/home"> buttom home</Link>
                </ListGroup.Item>
                <Routes >
                          <Route path="/mapPage" element={ <Mappage/>}/>
                          <Route path="/home" element={<Home/>}/>
                </Routes>
              </ListGroup>
            </div>
             </BrowserRouter>
        );
    }
}
export default FloorOne;

i use route and routes and link it to a component as i thought its a "page". but the previous component still renderd on the page other page that i navigate (either mappage or hompage)

this is homepage

import React, { Component } from 'react';

function Home() {
    return <div>
       <h1>this is homepage</h1>
    </div>
    ;
}

export default Home;