this is my first time posting here.
I am having a problem with how the production build paths to my images are generated when I run npm run build.

I have some logos to display in one of my React components, which show properly in the local server... the problem arises when I deploy to Netlify.

This is the code I use to get them dynamically:

currentProject.icons.map(el => {
  return (
    <div key={el.id} className={styles.logo}>
      <div
        className={styles["logo-wrap"]}
        style={{ margin: ".3rem 0" }}
      >
        {el.icon}
        <p>{el.tag}</p>
      </div>
    </div>
  );
})}

This is the result in localhost:

But this is the result in production:

Now, I noticed that in the production build the image src is wrong (./ instead of ../) as when I modify the path in the devtools, the correct image pops up.

My images are in public/Icons but I am importing them to my projects properties so I can render them dynamically.

Before:

After I add a . to the file path:

This is the folders structure:

Right now I was just testing with the React logo, but before I was also trying to import them from src/assets/Logos, but the result is the same in localhost.

How can I fix this problem?