Javascript – React App – importing images as part of map function

I am trying to build a reusable component such that I can pass it an object imported from a data file and the component renders external links to different social media sites represented by their respective icons. I am also trying to make it dynamic enough to where it only renders links for the provided platforms within the data file. I had the component working properly accepting no props and simply coding in the links i wanted to use and importing the images at the top of my file. However, as previously mentioned I would like to be able to use this component for different sets of links.

I have a data file containing the following:

export const SocialLinks = [
    {platform: "facebook", link: "https://www.facebook.com/profile.php?id=100087644260703"},
    {platform: "instagram", link: "https://www.instagram.com/sun_shineapp/"},
    {platform: "tiktok", link: "https://www.tiktok.com/@the_sunshineapp?lang=en"},
    {platform: "twitter", link: "https://twitter.com/SunShineApp_"},
    {platform: "youtube", link: "https://www.youtube.com/channel/UCwA1j9ByldoGS3MFvPU6Qhg"},
];

and i have the react component as follows:

import classes from "./Socials.module.css";

import facebook from "../assets/facebook.png";
import instagram from "../assets/instagram.png";
import tiktok from "../assets/tiktok.png";
import twitter from "../assets/twitter.png";
import youtube from "../assets/youtube.png";

function Socials({ socialLinks }) {
  return (
    <div className={classes.socials}>
      {socialLinks.map((item) => (
        <a
          className={classes.link}
          key={item.platform}
          href={item.link}
          target="_blank"
          rel="noopener noreferrer"
        >
          <img
            className={classes.img}
            src={require(`../assets/${item.platform}.png`).default}
            alt={`../assets/${item.platform}.png`}
          />
        </a>
      ))}
    </div>
  );
}

I still have the import statements at the top even though they are not being used currently. I am currently seeing the links being rendered and functioning but the images are no longer rendering so i only see the alt text for each image which is currently set to show me the filepath that is being passed to the src of the image. I am trying to use require().default with no luck and have also attempted to simply pass the literal ../assets/${item.platform}.png with no luck as well.

Is there any way to fix this?