React list already using unique keys but still getting unique key missing error in dev tools console

React (Next.js) list already using unique keys but still getting unique key missing error in dev tools console.

Here’s the container:

  <Container className={'menuList'}>
    {this.props.menuList.map((v, i) => (
        <MenuListCategory
            key={v.id + ' ' + v.name}
            closeM={this.props.handleMenu}
            listNames={this.props.listNames[i]}
            icon={v.icon}
            title={v.name}
        />
    ))}
  </Container>;

And here the API:

  {
    "menuList": [
        {
            "id": 1,
            "name": "CategoryXYZ",
            "icon": "places:XYZ",
        },

        ...

   }

Since id is unique, I expected it to work as a unique key but somehow it doesn’t. Both name and id are already unique. I’ve tried using key={v.id} and key={v.name} though both give the same error in dev tools dev tools React component tab, found below, via the Chrome extension for React debugging. I also tried the even more unique key={v.id + ' ' + v.name} but get the same result.

Am getting this warning in React dev tools:

Warning: Each child in a list should have a unique “key” prop. Check
the render method of MenuListCategory …

I’m trying to avoid installing a package to manage the unique id.

Any suggestions on how to fix this?

Surely, it’s been encountered before, I’m just not able to find anything regarding already having unique id which aren’t being recognised as unique.