Currently I have this situation:

export default function App() {
  return (
    <div className="App">
      <Component1 icon={<Icon color="green" />} />
    </div>
  );
}

const Component1 = ({ icon }) => {
  const data = [
    { name: "First", color: "green" },
    { name: "Second", color: "red" },
  ];

  return (
    <ul>
      {data.map((dat, index) => (
        <div key={index}>
          <li>Name: {dat.name}</li>
          <li>Icon: {icon}</li>
        </div>
      ))}
    </ul>
  );
};

const Icon = ({ color }) => (
  <div style={{ backgroundColor: color, width: 20, height: 20 }} />
);

According to this code, the Icon will be always the same for each value of data.
I need to pass the Icon component to Component1 as a prop but without giving the value of the prop color there, instead, I need to use the values that comes from data. How can I do it?

The Icon component can’t be modified.

I wanted to do something like this:

  {data.map((dat, index) => (
    <div key={index}>
      <li>Name: {dat.name}</li>
      <li>Icon: {<icon color={dat.color} />}</li>
    </div>
  ))}

But that won’t work.