Реагировать на useState без изменения значения

Я использую useState вот так и событие onclick с именем жанрHandler:

    const [clickedGenre, setClickedGenre] = useState<string>(null)

    const genreHandler= (event: React.MouseEvent<HTMLLIElement>) => {
      console.info(clickedGenre)
      const li: HTMLLIElement = event.currentTarget;
      setClickedGenre(li.id);    
      axios.get(API_URL+"products?category.genre = "+clickedGenre)
        .then((response) => {
          setProductList( response.data );
        })
        .catch((error)=>{
          console.info(error)
        }),[clickedGenre]
      }

вот мой ли тег

    <li className = "list-group-item text-uppercase" 
      key= {category.id} id = {category.genre} 
      onClick = {genreHandler}>{category.genre}</li>

Когда я нажимаю на li, состояние использования (clickedGenre) по-прежнему не изменяется на {category.genre}. Это изменение по двойному щелчку. Пожалуйста, помогите мне, что не так с моим кодом