Reactjs 使用底部导航操作更改屏幕时，如何消除延迟？

我第一次使用nextjs和material ui学习如何构建web应用程序。我正在尝试创建一个底部导航，单击时会高亮显示，同时导航到另一个屏幕。现在需要点击两下才能完成

我知道material ui没有功能。我尝试过使用from next/router，但由于它封装了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>
  );
}

import React，{useState}来自“React”；
从'@material ui/core/styles'导入{makeStyles}；
从“@material ui/core”导入{BottomNavigation，BottomNavigationAction）；
从“下一个/路由器”导入路由器
从“@material ui/icons/Folder”导入FolderIcon；
从“@material ui/icons/Restore”导入restoreCON；
const useStyles=makeStyles({
根目录：{
宽度：“100%”，
位置：'固定'，
底部：0，
boxShadow:'0-1px 1px 0 rgba（0,0,0,1）'，
背景颜色：“白色”，
fontSize:'.53rem'，
重量：500，
text装饰：“无”，
},
});
导出默认函数导航（）{
const classes=useStyles（）；
const[value，setValue]=useState（'track'）；
常量handleChange=（事件，newValue）=>{
设置值（新值）；
};
返回(
Router.push（'/track'）}/>
Router.push（'/learn'）}/>
);
}

我希望每个页面（在本例中为“/track”和“/learn”）都将绑定到导航按钮，并且在单击时样式将保持不变