reactjs - React レンダリング コンポーネント

Question

jsonファイル情報に基づいてコンポーネントをレンダリングする方法は? UL リストをレンダリングするマップがあります。各 Li がレンダリングされます。(私は、img を使用してこれを行うことができ、json ファイルから src={} をオブジェクトとして渡すことができることを知っています。しかし、これを解決する別の方法があるかどうか知りたいです。以下のコード:

import React from 'react'
import { FiLinkedin as LinkedinIcon, FiGithub as GithubIcon } from 'react-icons/fi';

import Data from '../../socials.json';

import { Container } from './styles';

export default function Profile() {
  return (
    <Container>
      <ul id="profile-links">
        {Data.map((social, index) => {
          return (
            <li id={social.id} key={social.id}>
              <a href={social.url} target="_BLANK" rel="noreferrer">
                <LinkedinIcon size={22} />  // change this component based on -social.icon info-
                <strong>{social.title}</strong>
                <span className="small-link">{social.slug}</span>
              </a>
            </li>
          )
        })}
      </ul>
    </Container>
  )
}