I was fetching videos from an API and there were duplicates. So, I applied uuid to generate a key for each - `key={uuid()}` - until realizing that I was generating a new key for every render.

Below is my fix, but I am not quite sure if it's really solving the issue.

```
export default function VideoList({ videos, observedElement }) {
  const location = useLocation();

  const videoList = videos.map((video, index) => {
    video.uuid = uuid();

    return (
      <Link
        to={`/videos/${video.id.videoId}`}
        state={{ backgroundLocation: location }}
        key={video.uuid}
      >
        <VideoListEntry info={video} ref={observedElement} />
      </Link>
    );

  return <div>{videoList}</div>
}

```

Edit: I know that using an id from db or creating a combination within the given data is more preferable. But I just want to know if there is a way to generate a stable key with uuid.