How can I make my accordion auto-collapsible

Question

I am builing my accordion with ReactJS but cannot find a way to make it auto-collapse when another one is opened. It is working perfectly fine but I just want the item to callapse as soon as another is opened.

import React, {useState} from 'react'
import { FaMinus, FaPlus } from "react-icons/fa6";
import './accordion.css'

const Accordion = ({ title, answer }) => {
    const [accordionOpen, setAccordionOpen] = useState(false);
  return (
    <div className='accordion-group'>
        <button onClick={() => setAccordionOpen(!accordionOpen)} className='accordion-toggle'>
            <h1 className='question' >{title}</h1>
            {accordionOpen ? <span className="accordion-icon"><FaMinus /> </span> : <span className="accordion-icon"><FaPlus /></span> }
            
        </button>

        <div className={ `accordion-text ${ accordionOpen ? "accordion-show" : "accordion-hidden" }` }>
            <h4 className="answer">{answer}</h4>
        </div>
    </div>
  )
}

export default Accordion