Некорректный переход на другую страницу в React 6 js

Я пишу проект простого сайта с несколькими страничками. Сейчас не могу реализовать переход между ними. Делал это по видео какой-то чела, ну там версия была реакта 5, а у меня 6. Я в вебе вообще не шарю, но вынужден этим заниматься(

Мне надо при нажатии на ссылку у панели сверху перейти на другую страничку, но мне просто дописывается контент из новой странички. Ну и получается просто там блок дописывается из странички ну и дальше идёт отрисовка того что было.(на картинке)

Я так понимаю что я не выполняю переход, а просто выполняю функцию из Control.js, а далее просто идёт выполнение App.js?

Далее будут сами странички.

index.js Я его не трогал.

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

reportWebVitals();

Это типа страница авторизации на текущий момент App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { Button } from "react-bootstrap";
import 'bootstrap/dist/css/bootstrap.min.css';
import Header from "./components/Header";

import {
  BrowserRouter as Router,
  Routes, // instead of "Switch"
  Route,
  NavLink,
  Link
} from "react-router-dom";

import Students from './pages/Students';
import Plans from './pages/Plans';
import Controls from './pages/Controls';
import Zachetka from './pages/Zachetka';
import Kabinet from './pages/Kabinet';
import Error from './pages/Error';


function App() {
  return (
    <>
      <Header />
      <Router>
        <Routes>
          <Route path="/students" element={<Students />} />
          <Route path="/plans" element={<Plans />} />
          <Route path="/controls" element={<Controls />} />
          <Route path="/zachetka" element={<Zachetka />} />
          <Route path="/kabinet" element={<Kabinet />} />
        </Routes>
      </Router>
      <div >
        <center>
          <img src={logo} className="App-logo" alt="logo" />
          <form>
            <label>
              <p>Логин</p>
              <input className="inputField" type="text" size="20"
                maxLength="15" id="login" defaultValue="Логин..." />
            </label>
            <label>
              <p>Пароль</p>
              <input className="inputField" type="password" size="20"
                maxLength="15" id="password" defaultValue="Логин..." />
            </label>
            <div>
              <button variant="primary" className="button" onClick={
                (e) => {
                  let login = document.getElementById("login").value
                  let password = document.getElementById("password").value
                  console.log(`login: ${login}, password: ${password}`)
                  alert(`login: ${login}, password: ${password}`)
                }
              }>ПОЕХАЛИ!</button>
            </div>

          </form>
        </center>
      </div>
    </>
  );
}


export default App;

Header.js Это компонент верхней панели. Я решил навигацию сделать через него. По идее все должны быть здесь, но почему то тогда не осуществляется переход. А вот если их засунуть в App то переход происходит.

import React, { Component } from 'react';
import { Nav, Navbar, FormControl, Form, Container } from 'react-bootstrap';
import Logo from './logo192.png'
import {
    BrowserRouter as Router,
    Routes, // instead of "Switch"
    Route,
    Navigate,
    Link
  } from "react-router-dom";

import Students from '../pages/Students';
import Plans from '../pages/Plans';
import Controls from '../pages/Controls';
import Zachetka from '../pages/Zachetka';
import Kabinet from '../pages/Kabinet';
import Error from '../pages/Error';

export default class Header extends Component {
    render() {
        return (
            <Navbar collapseOnSelect expand="md" bg="dark" variant="dark">
                <Container>
                    <Navbar.Brand href="/">
                        <img
                            src={Logo}
                            height="30"
                            widht="30"
                            className="d-inline-block allign-top"
                            alt="Logo"
                        />
                    </Navbar.Brand>
                    <Navbar.Toggle aria-controls="responsive-navbar-nav" />
                    <Navbar.Collapse id="responsive-navbar-nav">
                        <Nav className="mr-auto">
                            <Nav.Link href="/"></Nav.Link>
                            <Nav.Link href="/students">Несчастные студенты</Nav.Link>
                            <Nav.Link href="/plans">Учебные планы</Nav.Link>
                            <Nav.Link href="/controls">Посещаемость</Nav.Link>
                            <Nav.Link href="/zachetka">Электронная зачётка</Nav.Link>
                            <Nav.Link href="/kabinet">Личный кабинет</Nav.Link>
                        </Nav>
                    </Navbar.Collapse>
                </Container>
            </Navbar>
        );
    }
}

Ну вот Control.js Типовой пример странички куда надо перейти.

import React, {Component} from 'react';

export default class Controls extends Component{
    render(){
        return (
            <div>
                <p>Controls</p>
            </div>
        )
    }
}