Component that I am trying to test renders another component that lazy imports svgs. Because of the lazy import the test runs indefinitely

Question

I have the following Icon component:

const Icon: FunctionComponent<Props> = ({ icon, ...rest }) => {
    const LazyLoadedIcon = Icons[icon as IconType];

    return <View><LazyLoadedIcon {...rest} /></View>;
};

And the following list of lazy loaded icons from which I dynamically pick:

const Icons = {
    home: lazy(() => import('@src/assets/icons/home.svg')),
    games: lazy(() => import('@src/assets/icons/games.svg')),
};

export type Icon = keyof typeof Icons;

export default Icons;

While running the following test, I realized that the lazy loaded icon container is making my test run indefinitely. If I remove the icon component from the component I am testing, the test goes through successfully.

describe(Component, () => {
    it('Render Component', () => {
        const { getByTestId } = render(
            <Games />
        );

        expect(getByTestId('Games')).toBeTruthy();
    });
});

The Games component renders the Icon component. Any idea why this might be happening?