change timeout of bootstrap-accordion when collapsing

I am trying to change the transition duration when react-bootstrap accordion collapse or open. I see it a little bit slow and want to change it to 200 ms But I could not find a proper way. Here is what I have done.

export default function App() {
  return (
    <div className="App">
      <div className="accordion-wrap">
        <Accordion>
          <div className="accordion-header">
            <p>First</p>
            <Accordion.Toggle eventKey="0">click</Accordion.Toggle>
          </div>
          <Accordion.Collapse eventKey="0">
            <div>
              I’m the best thing that ever happened to placeholder text. Some
              people have an ability to write placeholder text... It's an art
              you're basically born with. You either have it or you don't. 
            </div>
          </Accordion.Collapse>
        </Accordion>

        <Accordion>
          <div className="accordion-header">
            <p>Second</p>
            <Accordion.Toggle eventKey="0">click</Accordion.Toggle>
          </div>
          <Accordion.Collapse eventKey="0">
            <div> Lorem </div>
          </Accordion.Collapse>
        </Accordion>

        <Accordion>
          <div className="accordion-header">
            <p>Third</p>
            <Accordion.Toggle eventKey="0">click</Accordion.Toggle>
          </div>
          <Accordion.Collapse eventKey="0">
            <div> hi COntent</div>
          </Accordion.Collapse>
        </Accordion>
      </div>
    </div>
  );
}

And css

.accordion-wrap{
  width: 900px;
  margin: 0 auto;
}

.accordion{
  background: #f4f4f4;
  padding: 16px;  
}

.accordion-header{
  display: flex;
  justify-content: space-between;
}

Here is the Demo

The animation is done via CSS, and the CSS classes are switched using javascript.

If you just want to reduce the transition, use transition-delay: and transition: height on the .collapsing class.

.collapsing {
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
  transition: height 0.2s ease;
}

Example:

let divRef = document.getElementById("click");
divRef.addEventListener("click", () => {
  let divRef = document.getElementById("myDIV");
  divRef.classList.toggle("expand");
  
})

.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.expand {
  height: 200px !important;
  transition: height 0.30s ease-out;
}


#myDIV {
  padding: 0 18px;
  height: 0;
  overflow: hidden;
  transition: height 0.30s ease-out;
  background-color: #f1f1f1;
}

<button class="collapsible" id="click">Open Section 3</button>

<div id="myDIV">
  This is a DIV element. <br>
  This is a DIV element.<br>
  This is a DIV element.<br>
  This is a DIV element.
</div>