Javascript 动态加载 SVG React 组件

try 动态加载SVG，但出现运行时错误，不确定问题出在哪里.有人能帮忙吗？

Component:

import React, { useEffect, useRef } from "react";
import { IIcon } from './IIcon';
import {
    DEFAULT_ASSET_ICON_FOLDER,
} from '@/constants/default';

function Icon({name}: IIcon) {
  const ImportedIconRef = useRef();

  useEffect(() => {
    const importIcon = async () => {
      try {
        ImportedIconRef.current = (
          await import(`${DEFAULT_ASSET_ICON_FOLDER}/${name}.svg`)
        ).ReactComponent;
      } catch (err) {
        // @TODO - Log error somewhere
      }
    };
    importIcon();
  }, [name]);

  const SvgIcon = ImportedIconRef.current;

  return (
    <SvgIcon />
  );
}

export default Icon;

Usage:

<Icon name="DELETE" />

Error

Unhandled Runtime Error
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `Icon`.