Estoy escribiendo un componente de acordeón recursivo anidado personalizado para mostrar objetos, en ese componente recibo un error, cada niño en una lista debe tener una clave única, no estoy seguro de dónde debo colocar la propiedad clave

como solucionar el mismo.

acordeón.js:

 import React, { useState, useCallback } from 'react' import { Container, Grid } from '@material-ui/core' import './styles.css' function Accodian({ explorer }) { const [ expand, setExpand ] = useState(false) const handleExpand = useCallback(() => { setExpand(prevState => !prevState) }) if (explorer.children) { return ( <div style={{ width: '100%' }} className={'tabs'} key={explorer.label}> {explorer.children ? ( <> <div className='tab' onClick={handleExpand}> <label className={ expand ? 'tab-label-expanded' : 'tab-label' }> {explorer.label} </label> </div> {expand ? ( <Container className='tab-content'> <Grid container spacing={1}> {explorer.children.map(child => { return ( <React.Fragment> {Array.isArray(child.children) ? ( <Accodian explorer={child}/> ) : ( <Grid item xs={12} sm={6} md={6} lg={4} xl={3}> <li> <b>{child.label}</b>{' '}: {child.value} </li> </Grid> )} </React.Fragment> ) })} </Grid> </Container> ) : null} </> ) : null} </div> ) } else { return <div style={{ paddingLeft: '20px' }}>{explorer.label}</div> } } export default Accodian