suddenly dissapearing accordion body

Question

  const accordionStyle = {
    marginBottom: '25%',
  };
  const accordionHeadStyle = {
    marginTop: '2%',
    borderRadius: 80,
  };
  const accordionBodyStyle = {
    borderBottomLeftRadius: 80,
    borderBottomRightRadius: 80,
    backgroundColor: 'red',
  };

  <Accordion.Item eventKey="0" >
     <Accordion.Header type="header" style={accordionHeadStyle} className="accordion-header-with-icon" >Accordion 1 Title
    </Accordion.Header>
       <Accordion.Body style={accordionBodyStyle}>
          ACCORDION 1 CONTENT
       </Accordion.Body>
 </Accordion.Item>
</Accordion>

in this structure, i tried to use accordion component in bootstrap-5. When i click on the head of the component, body section opens and after a short moment, it dissapears. What could the problem be?