bootstrap acordeón en mi aplicación donde el requisito es una forma dentro de acordeón y cuando hago clic en el botón de búsqueda en esa forma, se debe abrir el tercer acordeón para eso he escrito una función como la siguiente:

 const [expanded1,setexpanded1] = useState(true) const [expanded2,setexpanded2] = useState(false) const [expanded3,setexpanded3] = useState(false) const Accordion1 = () => { setexpanded1(!expanded1) setexpanded2(false) setexpanded3(false) } const Accordion2 = () => { setexpanded2(!expanded2) setexpanded1(false) setexpanded3(false) } const Accordion3 = () => { setexpanded3(!expanded3) setexpanded2(false) setexpanded1(false) }

en el segundo acordeón, tengo un formulario y un botón, solo he compartido el código del botón aquí

 <Button color="btn btn-primary" type="button" className="mr-3" id="create_button" onClick={Accordion3} aria-expanded={expanded3} as={Card.Header} eventKey="2" > Search </Button>

En 3er acordeón:

 <Card> <CardHeader> <h5 className="mb-0"> <Accordion.Toggle as={Card.Header} className="btn btn-link" color="default" onClick={Accordion3} eventKey="2" aria-expanded={expanded3} style={{fontSize:"16px"}} > {"Search Results"} </Accordion.Toggle> </h5> </CardHeader> <Accordion.Collapse eventKey="2"> <CardBody> <Search/> </CardBody> </Accordion.Collapse> </Card>

cuando hago clic en el botón, la marca de flecha se alterna pero el contenido no se abre.