Tengo un acordeón React Js, cuando hago clic en un elemento, se abre el panel, para cerrarlo debe hacer clic en el mismo elemento u otro elemento, necesito mantener el primer elemento abierto al principio.

El método eventHandler obtiene la identificación de cada elemento del acordeón, estos elementos se obtienen de una API, cada vez que hago clic en un elemento obtengo la identificación del elemento, pero cuando el componente monta el archivo console.log (activo) devuelve nulo

Necesito obtener la identificación del primer elemento, porque el primer índice no será 0, por lo que useState (0) no ayudará, ¿alguna idea de cómo hacerlo?

Aquí está mi código:

 const { active, setActive } = useContext(AccordionContext) const eventHandler = (e, index) => { e.preventDefault(); setActive(index !== active ? index : null); } return ( <div id={props.index}> <button onClick={(e) => eventHandler(e, props.index)} aria-expanded={ active === props.index ? 'true' : 'false' } aria-disabled={ active === props.index ? 'true' : 'false' } > <span> {props.description} </span> </button> <div> <div toggle={active === props.index}></div> </div> </div> )

Y aquí está el AccordionContext

 const AccordionWrapper = (props) => { const [active, setActive] = useState(null); console.log(active) return ( <AccordionContext.Provider value={{ active, setActive }} > <AccWrapper> {props.children} </AccWrapper> </AccordionContext.Provider> ) }