Highlight the Appbar page when in that specific page

Question

I am trying to add a highlight to the page link that I'm currently looking at in the app bar. but when I add the highlight, it is only highlighting when the link is being clicked but the highlight is disappearing when I got redirected to any page.

I tried to add a: active in CSS to add the background color and color to the text as well but the page link is not able to highlight the tab on the app bar it is just highlighting the link when I'm able to click on the link only.

import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import Navbar from "./components/navbar/Navbar";
import AboutUs from "./pages/about-us/AboutUs";
import ContactUS from "./pages/contact-us/ContactUS";
import Dashboard from "./pages/dashboard/Dashboard";

function App() {
    return (
        <Router>
            <div className='App'>
                <div>
                    <Navbar />
                </div>
                <Switch>
                    <Route exact path='/'>
                        <Dashboard />
                    </Route>
                    <Route path='/contactus'>
                        <ContactUS />
                    </Route>
                    <Route path='/aboutus'>
                        <AboutUs />
                    </Route>
                </Switch>
            </div>
        </Router>
    );
}

export default App;

import MenuIcon from "@mui/icons-material/Menu";
import { Box } from "@mui/system";
import React from "react";
import { Link } from "react-router-dom";

function Navbar() {
    return (
        <div>
            <Box>
                <AppBar position='static'>
                    <Toolbar>
                        <IconButton>
                            <MenuIcon />
                        </IconButton>
                        <Box>
                            <IconButton>
                                <Link to='/'>
                                    <Typography
                                        variant='body1'
                                        style={{ marginRight: "1rem" }}>
                                        Dashboard
                                    </Typography>
                                </Link>
                                <Link to='/aboutus'>
                                    <Typography
                                        variant='body1'
                                        style={{ marginRight: "1rem" }}>
                                        About Us
                                    </Typography>
                                </Link>
                                <Link to='/contactus'>
                                    <Typography
                                        variant='body1'
                                        style={{ marginRight: "1rem" }}>
                                        Contact Us
                                    </Typography>
                                </Link>
                            </IconButton>
                        </Box>
                    </Toolbar>
                </AppBar>
            </Box>
        </div>
    );
}

export default Navbar;