how to dynamically import a react component and call it?

I have a react component that contains an SVG image.
and i import it like this

import MessageIcon from '../static/styles/svg/messageIcon';

However as part of code splitting, i want to dynamically import it instead of static import.

I tried like this but does not work

import('../static/styles/svg/messageIcon').then(MessageIcon => {
return <MessageIcon />
});

can anyone tell me how i can dynamically import and call this component? thanks in advance

You can import dynamical like this :

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

import React, { useEffect, useState } from "react";

const App = () => {
    const [state, setState] = useState<any>();

    useEffect(() => {
        (async () => {
            const i = await import("../../assets/img/user.svg");
            setState(i);
        })();
    }, []);
    
    return <img alt={"test dynamic"} src={state?.default} />;
};
export default App;

<!-- end snippet -->

Also, you can write it with ref too:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    import React, { useEffect, useRef } from "react";

    const App = () => {
        const ref = useRef<any>();

        useEffect(() => {
            (async () => {
                const i = await import("../../assets/img/user.svg");
                ref.current.src = i.default;
            })();
        }, []);
        
        return <img alt={"test dynamic"} ref={ref} />;
    };
    export default App;

<!-- end snippet -->

import dynamical React component

import React from "react";

const App = () => {
      const nameIcon = "iconMessage";
      const IconMessage = React.lazy(() => import(/* webpackChunkName: "icon" */ `./${nameIcon}`));

      return <IconMessage />;
};
export default App;