Type instantiation is excessively deep and possibly infinite (ts-2589) error with styled-component and typescript setup #2984
Description
I have an typescript issue Type instantiation is excessively deep and possibly infinite (ts-2589) when using react-svg with styled-component. Please help me resolve this issue. Thank in advance.
My code is below
const BottomNavigation: React.FC<BottomNavigationProps> = ({ buttons }) => {
return (
<Container>
{buttons.map((button) => (
<Button key={button.id}>
<Icon
$active
src="https://...svg"
/>
<Label active>{button.label}</Label>
</Button>
))}
</Container>
);
};
const Icon = styled(ReactSVG)<{ $active: boolean }>`
width: 24px;
height: 24px;
path {
fill: ${(props) => (props.$active ? '#FF0000' : '#66798B')};
}
`;Some additional image(s):