Reactjs Accordion Bullet - reactjs

Question

How do I make background color of "-" bullet expand when I active the content.
Image 1 is what I want to do while Image 2 is what I do...
Want to be like tis
[1]
(https://i.stack.imgur.com/5NDOX.png)
My Demo
[2]
(https://i.stack.imgur.com/0ztPK.png)
My Js Code
`
const [isActive, setIsActive] = useState(false);
<div className="support">
<div className='containerFour'>
<h1>FAQ</h1>
<h1>Tell us what you're searching for</h1>
<div className="accordion">
<div className="accordionItem">
<div className="accordionTitle" onClick={() => setIsActive(!isActive)}>
<h1 className='accordionH'>What payment methods are available to complete your purchase?</h1>
<div className='accordionBullet'>{isActive ? <img src={Close} /> : <img src={Open}/>}</div>
</div>
{isActive && <div className="accordionContent">Test</div>}
</div>
</div>
</div>
</div>
`
My Css
.support .accordion {
width: 811px;
margin-left: auto;
margin-right: auto;
}
.support .accordionItem {
margin-bottom: 1.5rem;
}
.support .accordionBullet{
background-color: #205696;;
padding-top: 1rem;
}
.support .accordionTitle {
display: flex;
flex-direction: row;
justify-content: space-between;
cursor: pointer;
background-color: #D9D9D9;;
}
.support .accordionH{
font-family: 'Urbanist';
font-style: normal;
font-weight: 700;
font-size: 24px;
line-height: 29px;
color: #000000;
}
.support .accordionTitle:hover {
background-color: #D9D9D9;;
}
.support .accordionContent {
background-color: #D9D9D9;
}

Answer 1

Currently, the accordionBullet is inside the accordionTitle. Its maximum height = height of the h1 heading only.
Put accordionBullet beside accordionItem so that it can expand with its height.
<div className="accordion">
<div className="accordionItem">
... (Title + Content) ...
</div>
<div className="accordionBullet">
...
</div>
</div>
.accordion {
display: flex;
}