Displaying images from array of objects fails when mapping

I’m learning ReactJS and I’m trying to display a list of socials from an array of objects just like so :

const baseUrl = "./";
export const SocialData = [
    {
        platform: "Linkedin",
        link: "https://www.linkedin.com/in//",
        icon: baseUrl + "linkedin.png",
    },
    {
        platform: "Github",
        link: "https://github.com/",
        icon: baseUrl + "github.png",
    },
];

Then in my component I would display it like this :

import { SocialData } from "../../data/social";
import "./socials.css";

function Socials() {
  const data = SocialData;
  return <div className="social-contact"> 
{/*     <img src={require('./linkedin.png')}/>
 */}  {
      data.map((item) => {
          return (
          <a href={item.link} key={item.platform}>
            <div className="social-icon-div">
              <img src={ require(item.icon) } className="social-icon" />
            </div>
          </a>
          )
      })}
    </div>;
}

The commented image works just fine, yet when I’m trying to do the same in my map it says and throw this error:

Uncaught Error: Cannot find module ‘./linkedin.png’
at webpackEmptyContext (socials|sync:2:1)
at Socials.js:14:1
at Array.map ()
at Socials (Socials.js:7:1)
at renderWithHooks (react-dom.development.js:14985:1)
at mountIndeterminateComponent (react-dom.development.js:17811:1)
at beginWork (react-dom.development.js:19049:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
at invokeGuardedCallback (react-dom.development.js:4056:1)

I’ve tried to put the require in the data directly, it does the same.
I also tried

<img src={require( “” + props.src )} alt={props.imageAlt} />

As explained here but nothing did the job.
Thanks for your help!