Обновить состояние в методе React Hooks on Change

Мне интересно, почему React не обновляет состояние после вызова метода onChange.

Описание: Простой элемент ввода с двумя плавающими правыми значками для отображения. Один значок для отображения, если длина входного текста равна 0, а другой, если длина входного текста > 0. Но кажется, что React обновляет состояние после того, как я ввожу второй текст в свой элемент ввода.

Мне нужно:

Отображать %, если длина == 0, и отображать X, если длина > 0.

А если длина > 0, то пользователь при нажатии X устанавливает текст ввода == "" ИЛИ input.length = 0.

Проблема в том, что я могу очистить ввод, но значок % не отображается.

  const onChange = (e: any) => {
    //setting user input
    if (userInput.length > 0)
      setDisplayIcon({ default: "d-none", clear: "d-block" });
    else setDisplayIcon({ default: "d-block", clear: "d-none" });
  };

  const clearText = (e: any) => {
    setUserInput("");
  };

  return (
   
            <label id = "default" className = {`${displayIcons.default}`}>
              %
            </label>
            <label className = {`${displayIcons.clear}`} onClick = {clearText}>
              X
            </label>
  );
}

🤔 А знаете ли вы, что...
С JavaScript можно создавать расширения для различных платформ, таких как Adobe Acrobat и Microsoft Office.