How to redirect from one Component to another in React

Question

My App.js:

import Navbar from "./components/navbar/Navbar";
import Hero from "./components/hero/Hero";

function App() {
    return (
        <div>
            <Navbar/>
            <Hero/>
        </div>
    );
}
export default App;

Navbar.js:

import React, {useState} from 'react'
import {BsPerson} from 'react-icons/bs'
import {HiOutlineMenuAlt4} from 'react-icons/hi'
import {AiOutlineClose} from 'react-icons/ai'


import './NavbarStyles.scss'
import Login from "../login/Login";


function Navbar() {
    const [nav, setNav] = useState(false)
    const handleNav = () => setNav(!nav)

    const [state, setState] = useState('start')

    return (
        <div name={'home'} className={`${nav ? 'navbar navbar-bg' : 'navbar'}`}>
            <div className={`${nav ? 'logo dark' : 'logo'}`}>
                <h2>TestMe</h2>
            </div>
            <div className={"nav-icons"}>
                <ul>
                    <li>
                        <BsPerson className={'icon'}/>
                    </li>
                </ul>

            </div>
            <div className={"hamburger"} onClick={handleNav}>
                {!nav ? (<HiOutlineMenuAlt4 className='icon'/>) : (
                    <AiOutlineClose style={{color: '#000'}} className='icon'/>)}

            </div>

            <div className={`${nav ? 'mobile-menu active' : 'mobile-menu'}`}>
                <div className={"mobile-menu-bottom"}>
                    <div className={"menu-icons"}>
                        <button>Account</button>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default Navbar

Hero.js:

import React from 'react'
import './HeroStyles.scss'

import Video from '../../assets/service_station.mp4'

function Hero() {
    return (
        <div className={'hero'}>
            <video autoPlay loop muted id='video'>
                <source src={Video} type='video/mp4'/>
            </video>
            <div className={"overlay"}>

            </div>
            <div className={"content"}>
                <h1>testMe</h1>
            </div>
        </div>
    )
}

export default Hero

How to redirect to another Component, which named as Login.js, by pressing the BsPerson in Navbar.js?

I mean exactly redirect, like open a Login.js as new page, without any dependencies from Navbar.js. Just redirect to Login Page.

I looked for guides at the web, but I find guides, where guys on button click loads another components on bottom of main component...