React: Returning a BS Accordion with mapped Accordion Items

I have a dropdown menu component called Filter. GitHub: https://github.com/nnall/Inventory.git Filter Component: https://github.com/nnall/Inventory/blob/main/src/filter.js In my Filter React component, I have it returning two different types of category filters, depending on screen width. If screen is over 550px width, the filters are checkboxes, and under 550px, I want them to be dropdown Bootstrap accordions. In either type of return, I'm mapping over an array of available filters for each category (ex; all colors, all 'makes', all years etc) in order to render the the checkboxes or Accordion Items (child of the Accordion). You'll see in the above Filter link, I'm returning the Accordion, but then inside of the Accordion, I'm using an object to try to map over the arrays from inside of the returned Accordion element.
I doesn't like me doing that and is giving me a objects are not valid as React child runtime error. How can I better arrange my return here to enable me to map over the arrays in order to create the needed number of Accordion Items inside each Accordion?

GitHub

GitHub - nnall/Inventory

Contribute to nnall/Inventory development by creating an account on GitHub.

GitHub

Inventory/src/filter.js at main · nnall/Inventory

Contribute to nnall/Inventory development by creating an account on GitHub.