Material UI Menu Using Routes doesn't scroll to the top on navigation change

I am having a problem with scrolling, when navigating using Material UI's MenuItem Link component.

When I am navigating to a different component it is keeping the scroll position from the last navigation. However I want it to restore and start from the top whenever the navigation is changed.

import React from 'react';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import { MenuItem } from '@material-ui/core';
import { Link } from 'react-router-dom'

function TopMenu() {
  return (
    <AppBar>
      <Toolbar>
        <MenuItem component={Link} to='/'>
          <Typography >
            It doesn't scroll to the top when I navigate the the main page. 
          </Typography>
        </MenuItem>
      <Toolbar>
    <AppBar>
  );
}

export default TopMenu;

None of the below solutions have worked in my case:

componentDidMount() {
  window.scrollTo(0, 0)
}

useEffect(() => {
  window.scrollTo(0, 0)
}, [])

Thanks in advance for your help!