How can I remove the delay when changing screens using the bottom navigation action?

I am using nextjs and material-ui to learn how to build a web app for the first time. I am trying to make a bottom navigation that highlights when clicked and navigates to another screen at the same time. Right now it takes two clicks to do that.

I understand that material-ui doesn't come with functionality. I have tried using from next/router but that takes away the styling as it encases the bottomnavigationaction

import React, { useState} from 'react';
import { makeStyles } from '@material-ui/core/styles';
import {BottomNavigation, BottomNavigationAction) from '@material-ui/core';
import Router from 'next/router'
import FolderIcon from '@material-ui/icons/Folder';
import RestoreIcon from '@material-ui/icons/Restore';




const useStyles = makeStyles({
        root: {
        width: '100%',
        position: 'fixed',
        bottom: 0,
        boxShadow: '0 -1px 1px 0 rgba(0,0,0,.1)',
        backgroundColor: 'white',
        fontSize: '.53rem',
        fontWeight: 500,
        textDecoration: 'none',
      },

});

export default function Navigation() {
  const classes = useStyles();
  const [value, setValue] = useState('track');

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };



  return (
    <BottomNavigation position="bottom" value={value} onChange={handleChange} className={classes.root}>
      <BottomNavigationAction label="Track" value="track" icon={<RestoreIcon />} onClick={() => Router.push('/track')} />
      <BottomNavigationAction label="Learn" value="learn" icon={<FavoriteIcon />} onClick={() => Router.push('/learn')} />
</BottomNavigation>
  );
}

I expect that each page(in this case '/track' and '/learn') would be bound to the navigation button and that the styling would remain when clicked.