javascript - Material-UI TypeScript, Link'i bileşen olarak kullanarak stil verilmiş ListItemButton oluşturma sorunu

Ben hover arka plan rengini değiştiren stil verilmiş bir ListItemButton oluşturmaya çalışıyorum. Bu bileşen birden fazla bileşenden kullanılacak, bu yüzden bunu yapıyorum. Sorun, bu NavigationListItemButton'ı bir react-router-dom Link bileşeni ile kullanırken TS denetiminin başarısız olması. Bunu 'component' ve 'to' özellikleri ile nasıl yapabilirim? Her türlü yardım takdir edilecektir.

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);

Tip ‘{ children: Element; component: (props: LinkProps & RefAttributes) => ReactElement; to: string; }’ tipi, ‘IntrinsicAttributes & ListItemButtonBaseProps & Omit<{ action?: Ref; centerRipple?: boolean; ... 11 more ...; TouchRippleProps?: Partial<...>; }, "classes"> & ... 5 more ... & { ...; }’ tipine atanamaz. ‘component’ özelliği, ‘IntrinsicAttributes & ListItemButtonBaseProps & Omit<{ action?: Ref; centerRipple?: boolean; ... 11 more ...; TouchRippleProps?: Partial<...>; }, "classes"> & ... 5 more ... & { ...; }’ tipinde mevcut değildir. ts(2322)

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