How to Navigate on Path by Button Click in React Router ?

// Filename - App.js

import React from "react";
import {
    BrowserRouter as Router,
    Switch,
    Route,
    Link,
} from "react-router-dom";
import Homepage from "./Components/Homepage";
import Courses from "./Components/Courses";
import "bootstrap/dist/css/bootstrap.min.css";

import "./App.css";
import Navbar from "./Components/Navbar";

function App() {
    return (
        <>
            <Navbar />
            <Router>
                <Switch>
                    <Route
                        exact
                        path="/"
                        component={Homepage}
                    />

                    <Route
                        exact
                        path="/courses"
                        component={Courses}
                    />
                </Switch>
            </Router>
        </>
    );
}

export default App;

// Filename - Components/Navbar

import React from "react";

function Navbar() {
    return (
        <div>
            <nav className="navbar navbar-light bg-light">
                <img
                    src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220125183244/g.png"
                    width="300"
                    height="75"
                    className="d-inline-block align-top logo"
                    alt="GfG.png"
                />
                GeeksforGeeks
            </nav>
        </div>
    );
}

export default Navbar;

// Filename - Components/Homepage.js

import React from 'react'
import { useHistory } from "react-router-dom";
import "../App.css";

function Homepage() {
    const history = useHistory();

    const coursesPage = () => {
        history.push("/courses")
    }
    return (
        <>

            <div className="jumbotron text-center">
                <h1 className="display-4">Hello,Geeks</h1>
                <p className="lead">
                    Geeks for Geeks is a Computer Science portal.  
                    It contains well written, well thought and well 
                    explained computer science and programming articles
                </p>

                <hr className="my-4" />
                <p>
                    Real-time Live and self paced courses carefully
                    curated for you !
                </p>

                <p className="lead">
                    <button className="btn btn-success"
                        onClick={coursesPage}>Explore Courses
                    </button>
                </p>

            </div>
        </>
    )
}

export default Homepage

// Filename - Components/Courses

import React from "react";
import "../App.css";
import { useHistory } from "react-router-dom";

function Courses() {
    const history = useHistory();
    const home = () => {
        history.push("/");
    };
    return (
        <>
            <div className="card ">
                <h1>Courses </h1>
                <ul className="list-group list-group-flush">
                    <li className="list-group-item">
                        Data Structures & Algorithms
                    </li>
                    <li className="list-group-item">
                        Competitive Programming
                    </li>
                    <li className="list-group-item">
                        Full Stack Development
                    </li>
                    <li className="list-group-item">
                        Java Backend
                    </li>
                </ul>
            </div>
            <button
                className="btn btn-success"
                onClick={home}
            >
                Back to Home
            </button>
        </>
    );
}

export default Courses;