css – scrollHeight is reading prior to computer animations complete, leading to an incorrect maxHeight worth

I’m attempting to make an Accordion component and also I desire the products to increase efficiently. Presently, the cushioning is reading prematurely, which causes it not being factored right into the scrollHeight effectively, that makes the accordion bodies as well little each time. Exactly how do I make scrollHeight consider the cushioning post-animation?

AccordionItem.js:

 import React, {useContext, useEffect, useRef, useState} from "respond";.
import AccordionContext from './ AccordionContext'.
import './ Accordion.css'.

const AccordionItem = ({youngsters, title}) => > {
const [openItem, setOpenItem] = useContext( AccordionContext).
const [height, setHeight] = useState( 0 ).
const itemRef = useRef( void).
const bodyRef = useRef( void).

const onClick = () => > {
( openItem === itemRef)? setOpenItem( void): setOpenItem( itemRef).
}

useEffect(() => > {
isOpen()? setHeight( Math.min( 400, bodyRef.current.scrollHeight)): setHeight( 0 ).
}, [openItem]).

const isOpen = () => > {
return openItem === itemRef.
}

return (.
<< div className= {"accordion-item" + (isOpen()? 'open ': ")} ref= {itemRef} >>.
<< div className= {"accordion-title"} onClick= {onClick} >>.
{title}
<.
<< div.
className=" accordion-body"
ref= {bodyRef}
design= {{maxHeight: elevation + 'px'}}
>>.
{youngsters}
<.
<.
).
}

export default AccordionItem.

Accordion.css:

 accordion-item {
background-color: #eee;.
shade: # 444;.
arrow: guideline;.
size: 100%;.
text-align: left;.
overview: none;.
change: 0.4 s;.
}

. accordion-title {
cushioning: 10px;.
background-color: #ff 77fb;.

boundary: rgba( 215, 215, 215, 0.3) 1px strong;.
arrow: guideline;.
screen: flex;.
justify-content: space-between;.
align-items: facility;.
}

. accordion-title:: after {
material:";.
setting: loved one;.
top: 50%;.
right: 0;.
size: 20px;.
elevation: 30px;.

background-image: link('././ static/images/arrow. svg');.
background-position: facility;.
background-size: have;.
background-repeat: no-repeat;.

filter: invert( 40%) sepia( 62%) fill( 6471%) hue-rotate( 305deg) illumination( 96%) comparison( 96%);.
/ * For a various shade: https://codepen.io/sosuke/pen/Pjoqqp */.

change: all 0.2 s convenience;.
}

. accordion-item. open.accordion-title:: after {
change: revolve( 180deg);.
}

. accordion-body {
cushioning: 0 18px;.
background-color: white;.
overflow: scroll;.
change: max-height 0.2 s ease-out, padding 0.2 s ease-out;.
}

. accordion-item. open.accordion-body {
cushioning: 18px;.
screen: block;.
opacity: 1;.
}