[BUG] Mapping key has multiple children

[ballyalley-o]

Describe the bug

It seems like you're encountering a warning related to React, specifically about non-unique keys within components. In React, when rendering a list of elements, each element should have a unique "key" prop assigned to it. This allows React to efficiently update and manage the list.

The warning you're seeing indicates that you have two children within a component that share the same key, which can lead to unexpected behavior such as duplicated or omitted elements.

To resolve this warning, ensure that each child element within the component has a unique key prop assigned to it. You can use unique identifiers such as database IDs or index values if no other unique identifier is available. This ensures React can properly reconcile and update the list elements.

potential fix:

function MyComponent({ items }) {
  return (
    <ul>
      {items.map((item, index) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

In this example, assuming each item in the items array has a unique id, we're using item.id as the key prop to ensure uniqueness. Make sure to replace item.id with the actual unique identifier in your code.

To Reproduce
Steps to reproduce the behavior:

1. Go to 'Dashboard'
2. Open devtools
3. Refresh
4. See error

Important

Error is comming from AnimateProsence from framer-motion, due to the children it is wrapping, solution is to map its children.

Solution

    <AnimatePresence>
          {React.Children.map(children, (child, index) => (
            <m.div key={index}>{child}</m.div>
          ))}
        </AnimatePresence>

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.