On Opening one dropdown the other drop down if it is opened should close

I want to add the logic of automatically closing an already opened drop-down menu, on opening the other menu. For example, I have opened feature-1 drop down, and while I click on feature-2 to open, feature-1 dropdown should close and vice versa.

const [expand1, setExpand1] = useState(false);
const [expand2, setExpand2] = useState(false);

             <ul>
                <li>
                    <div onClick ={() => setExpand1(!expand1)}>
                        <a onClick={() => openPane('1')} className="menu-item">
                        
                        <span>Feature-1</span>
                        <div className={`drop-down ${expand1 ? 'active' : ""}`}>
                        <i class='bx bx-chevron-down'></i>
                        </div>
                    </a>
                    </div></li>
                 <li>
                    <div onClick ={() => setExpand2(!expand2)}>
                    <a onClick={() => openPane('2')} className="menu-item">
                        <span>Feature-2</span>
                        <div className={`drop-down ${expand2 ? 'active' : ""}`}>
                        <i class='bx bx-chevron-down'></i>
                        </div>
                    </a>
                    </div>
               </li>
           </ul>