Each child in a list should have a unique "key" prop. Even after assigning the key (Next JS)

Question

I'm using Next JS. I've created a sidebar and added custom accordions (I've named the accordion component as SideAccord.js) in it. I'm looping the data through array. I've assigned the key but I'm still getting this error:

Warning: Each child in a list should have a unique "key" prop.

Check the render method of SideAccord. See https://reactjs.org/link/warning-keys for more information.
at SideAccord (webpack-internal:///./components/SideAccord/index.js:25:19)
at ul
at div
at div
at nav
at div
at O (webpack-internal:///./node_modules/styled-components/dist/styled-components.browser.esm.js:31:19750)
at Sidebar (webpack-internal:///./components/Sidebar/index.js:28:66)
at div
at Home
at MyApp (webpack-internal:///./pages/_app.js:18:24)

You can check the files here - - https://codesandbox.io/s/festive-turing-59uo4v?file=/src/Sidebar.js

I have 3 component files

Sidebar.js
SideAccord.js
SidebarData.js (which has all the data in the form of objects & arrays).

Here's the screenshot of the error - screenshot of the error

Answer 1

The problem is here, try to replace <></> to <React.Fragment key={i.id}> you have set key to child element, parent element is <> you should assign key to fragment.