Dynamic SVG import not showing image using Typescript

Question

I have created an Icon Component where it can load dynamic, seems like the SVG is not showing.

This is the sample

 function useDynamicSVGImport(name: string) {
  const ImportedIconRef = useRef<FunctionComponent<SVGProps<SVGSVGElement>>>();
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<Error>();

  useEffect(() => {
    setLoading(true);
    const importIcon = async (): Promise<void> => {
      try {
        ImportedIconRef.current = (await import(`../assets/${name}.svg`)).ReactComponent;
        console.log(`../assets/${name}.svg`);
      } catch (err) {
        console.log(err);

        setError(err);
      } finally {
        setLoading(false);
      }
    };
    importIcon();
  }, [name]);

  return { error, loading, SvgIcon: ImportedIconRef.current };
}

As per this Answer tsconfig.json still it's not working