React + Webpack: Dynamic Image Cannot find module 'assets/images/logo.jpg' t |groupOptions: {}|namespace object:87:1

Question

I am trying to develop a Header that it takes logo image dynamically depends the client.

I have a JSON that stores the information, for example

{
    "clientLogo": "assets/images/cLogo.jpg",
       ...
}

and I store it at a ContextProvider.

An example of code at my component:

const Header = () => {
const { clientLogo, clientName } = useClientContext();
const [clientLogoImage, setClientLogoImage] = useState(null);

useEffect(() => {
    if (clientLogo) {
        import(clientLogo)
            .then((clientLogoImg) => {
                setClientLogoImage(clientLogoImg);
            })
            .catch((err) => console.error(err));
    }
}, [clientLogo]);

return (
    <StyledHeader className="header">
        <div className="header-container">
            {clientLogoImage && (
                <img
                    loading="lazy"
                    src={clientLogoImage}
                    className="logo"
                    alt={clientName}
                />
            )}
        </div>
       ....

I have already ensured that clientLogo = "assets/images/cLogo.jpg" and if I execute

useEffect(() => {
    if (clientLogo) {
        import("assets/images/cLogo.jpg")
            .then((clientLogoImg) => {
                setClientLogoImage(clientLogoImg);
            })
            .catch((err) => console.error(err));
    }
}, [clientLogo]);

It works.

The problem is that when I use clientLogo variable I have this problem

Header.js:15 Error: Cannot find module 'assets/images/cLogo.jpg'
    at |groupOptions: {}|namespace object:87:1

DO you have any idea? Thank you in advance!