Estoy intentando crear un ListItemButton con estilo que cambie el color de fondo de desplazamiento. Este componente se usará a partir de múltiples componentes, por eso estoy haciendo esto. El problema es que cuando se usa este NavigationListItemButton con un enlace react-router-dom como componente, falla la verificación de TS. ¿Cómo puedo hacer esto con los accesorios 'componente' y 'a'? Cualquier ayuda sería apreciada.

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

Escriba '{ niños: Elemento; componente: <S = desconocido>(accesorios: LinkProps & RefAttributes) => ReactElement<cualquiera, cadena | JSXElementConstructor>; Encadenar; }' no se puede asignar al tipo 'IntrinsicAttributes & ListItemButtonBaseProps & Omit<{ action?: Ref; centerRipple?: booleano; ... 11 más ...; TouchRippleProps?: Parcial<...>; }, "clases"> & ... 5 más ... & { ...; }'. La propiedad 'componente' no existe en el tipo 'IntrinsicAttributes & ListItemButtonBaseProps & Omit<{ action?: Ref; centerRipple?: booleano; ... 11 más ...; TouchRippleProps?: Parcial<...>; }, "clases"> & ... 5 más ... & { ...; }'.ts(2322)

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