I need to replicate a component "n" times. To do that I used the lodash method times. The problem is that I need an index as a key for the components generated and It doesn't look like it has one.

I have the following code:

export const MyComponent: React.FC<{times: number}> = ({ times }) => {
  return (
    <>
      {_.times(times, () => (
        //I need a key={index} in this div
         <div className="bg-white border-4 border-white md:rounded-md md:p-2 content-center my-4 shadow w-full">
         </div>
       ))}
    </>
  );
};

This will return the component that is inside n times.

I tried to do a method that returns the component and set an index with useState, but it goes in an infinite loop. I thought to put a big random number as a key so it is extremely difficult to get the same, but I don't like that solution. I'd like to use this method because it is clean.

So what do you think I could do to give a to the component?