Testing icon based on dynamically imported svg in react-testing-library

Question

It's my first question here and I've been coding for only a year so please be patient. I looked for similar problems on the website but couldn't find anything that worked for me.

I created an Icon component where I dynamically import the requested SVG. I first used this solution which was working well but when I tried to test this component with react-testing library and snapshot I realised that the snapshot was always the span that is returned when nothing is imported. I first thought it was linked to the use of useRef() because I saw people saying refs didn't work with Jest so I changed my Icon component to be this:

const Icon: FC<IconProps> = ({ type, onClick, tooltip, className }: IconProps) => {

  const [IconProps, setIconProps] = useState({
    className: className || 'icon'
  });
  const tooltipDelay: [number, number] = [800, 0];
  useEffect(() => {
    setIconProps({ ...IconProps, className: className || 'icon' });
  }, [className]);

  const SVG = require(`../../svg/${type}.svg`).default;
  const spanClassName = "svg-icon-wrapper";
  if (typeof SVG !== 'undefined') {
    if (tooltip) {
      return (
        (<Tooltip title={tooltip.title} delay={tooltip.delay ? tooltipDelay : 0}>
          <i className={spanClassName}>
            <SVG {...IconProps} onClick={onClick} data-testid="icon" />
          </i>
        </Tooltip>)
      );
    }
    return (
      <SVG  {...IconProps} onClick={onClick} data-testid="icon" />
    );
  }
  return <span className={spanClassName} data-testid="span" />;
};

export default Icon;

Here is my test

it('matches snapshot of each icon', async (done) => {
    jest.useFakeTimers();
    const type = 'check';
    const Component = <Icon type={type} />;
    const renderedComp = render(Component);
    setTimeout(() => {
      const { getByTestId } = renderedComp;
      expect(getByTestId('icon')).toMatchSnapshot();
      done();
    }, 3000);
    jest.runAllTimers();
  });

I added timeout because I thought it might be link to the time it takes to import the SVG but nothing I tried worked.

So the main problem is: how can I have the svg being imported for this component to return an icon (with data-testid='icon') and not a span (with data-testid='span')

Help would be much appreciated. My app works perfectly and I'm stuck with this testing for a while now.