I am attempting to create a styled ListItemButton that changes the hover backgroundColor. This component will be used from multiple components which is why I am doing this. The issue is that when using this NavigationListItemButton with a react-router-dom Link as the component it fails TS checking. How can I do this with 'component' and 'to' props? Any help would be appreciated.

import { Theme, styled, alpha } from '@mui/material';
import ListItemButton from '@mui/material/ListItemButton';

const NavigationListItemButton = styled(ListItemButton)(
  ({ theme }: { theme?: Theme }) => ({
    '&:hover': {
      backgroundColor: alpha(theme.palette.secondary.main, 0.5),
    },
  }),
);

export default NavigationListItemButton;

import React from 'react';
import { Link } from 'react-router-dom';
import { ListItemText } from '@mui/material';

import NavigationListItemButton from '../NavigationListItemButton';

const OpsManagerListItem: React.FC<{ navigationOpen: boolean }> = ({
  navigationOpen,
}) => {
  return (
    <NavigationListItemButton component={Link} to={'toHere'}>
      <ListItemText primary={'Ops Manager'} />
    </NavigationListItemButton>
  );
};

export default React.memo(OpsManagerListItem);

Type '{ children: Element; component: <S = unknown>(props: LinkProps & RefAttributes) => ReactElement<any, string | JSXElementConstructor>; to: string; }' is not assignable to type 'IntrinsicAttributes & ListItemButtonBaseProps & Omit<{ action?: Ref; centerRipple?: boolean; ... 11 more ...; TouchRippleProps?: Partial<...>; }, "classes"> & ... 5 more ... & { ...; }'. Property 'component' does not exist on type 'IntrinsicAttributes & ListItemButtonBaseProps & Omit<{ action?: Ref; centerRipple?: boolean; ... 11 more ...; TouchRippleProps?: Partial<...>; }, "classes"> & ... 5 more ... & { ...; }'.ts(2322)

https://codesandbox.io/s/listitembutton-styled-dusbv?file=/src/OpsManagerListItem.tsx