UseState (true, false) is not working when I click a list item

I made dropdown and I have usestate and data. When I click ul dropdown opens. And I want when I click li element, dropdown has to close

  const [fromSelect, setFromSelect] = useState(false);

 const [currenciesData, setcurrenciesData] = useState({
    AED: "United Arab Emirates Dirham",
    AFN: "Afghan Afghani",
    ALL: "Albanian Lek",
    ANG: "Netherlands Antillean Guilder",
  });

And my component

       <ul className="dropdown">
                <input type={"text"} placeholder="Search currency" onChange={handleFilter} />

                {filteredData.length === 0
                  && Object.keys(currenciesData).map((symbol, key) => (
                      <li
                        key={key}
                        value={symbol}
                        onClick={() => {
                          setFromSelect(false); //THIS FUNCTION IS NOT WORKING
                          setCurrencyConvert((prevState) => ({
                            ...prevState,
                            from: symbol,
                          }));
                        }}
                      >
                        {symbol}
                      </li>
                    ))}

The problem is that when I clicked li, first function is not working, and it gives me true