I successfully made the inside of an accordion in React Bootstrap colored red, but it header remains non-red. Please, help to make the header red, too (it should be red when closed and light-red when open).

<Accordion defaultActiveKey={undefined}> <Accordion.Item eventKey="dangerZone"> <Accordion.Header onClick={() => setShowDanger(!showDanger)} className="bg-red-500" >{showDanger ? "Hide danger zone" : "Show danger zone"} </Accordion.Header> <Accordion.Body style={{background: 'red'}}> <p><Button disabled={!isAuthenticated} onClick={uninstall}>REMOVE PACKAGE AND ALL ITS DATA</Button></p> </Accordion.Body> </Accordion.Item> </Accordion> 

I successfully made the inside of an accordion in React Bootstrap colored red, but its header remains non-red. Please, help to make the header red, too (it should be red when closed and light-red when open).

<Accordion defaultActiveKey={undefined}> <Accordion.Item eventKey="dangerZone"> <Accordion.Header onClick={() => setShowDanger(!showDanger)} className="bg-red-500" >{showDanger ? "Hide danger zone" : "Show danger zone"} </Accordion.Header> <Accordion.Body style={{background: 'red'}}> <p><Button disabled={!isAuthenticated} onClick={uninstall}>REMOVE PACKAGE AND ALL ITS DATA</Button></p> </Accordion.Body> </Accordion.Item> </Accordion>