Using Material UI Sidebar

[haruki-nimbus]

This is a minor UI issue, but I created a sidebar with material-ui as below (this is a simplified verison):

import { MenuItem, SwipeableDrawer } from '@material-ui/core';
import { setLinkProps } from 'hookrouter';

const A = React.forwardRef(
  (props, ref) => <a ref={ref} {...setLinkProps(props)} />
);

// render
<SwipeableDrawer>
  {routes.map(route => (
    <MenuItem
       href={route.path}
       component={A}
       selected={/* route.path matches URL */}
       // other props
    >
      {route.title}
    </MenuItem>
  ))}
</SwipeableDrawer>

This works great, except the ripple effect on the MenuItem gets interrupted because the navigate function rerenders the sidebar. Any ideas on how to fix this?

I had the same setup when I was using import { Link } from 'react-router-dom', but that didn't interrupt the ripple animation when navigating from the sidebar.