Create an iterative rendering utility for React

const Component = () => {
const persons = [
{id: 1, firstName: 'John', lastName: 'Doe'},
{id: 2, firstName: 'Peter', lastName: 'Grater'}
]
return (
<div>
  <p>List of Names</p>
  <ul>
    {persons.map((item) => (
    <li>
      {item.firstName} {item.lastName}
    </li>
    ))}
  </ul>
</div>
)}

instead use the code below. Create a new file and use the code below

import {Children} from 'react';

export const Each = ({render, of}) => 
Children.toArray(of.map((item, index) => render(item, index)));