LocalStorage не возвращает нужный элемент

Пишу веб-приложение по учёту финансов, использую React Hooks (useState, useEffect). Я новичок, не ругайтесь. В чём моя проблема: Ввожу число в input и по нажатию кнопки он должен запомнить и вывести в категорию это значение, но по нажатию логика не работает (просто стирает значение, становится пустой строкой). Но при вводе самого значения - отображается, нажимаю на кнопку - очищается и ничего не выводит. Описал как мог, прошу прощения, если есть неточности.

Кнопка + input

 <div className = 'wrapper2'>
        <input type = 'text' className = 'moneyInput' placeholder = 'Input money out' onChange = {(e) => setItem_rate(e.target.value)} value = {item_rate}/>
        <button className = 'enterMoney' onClick = {newRateItem}> ENTER </button>
      </div> 

Логика:

const [item_rate, setItem_rate] = useState('')
  const [items_rate, setItems_rate] = useState(
    JSON.parse(localStorage.getItem('items_rate')) || []
  )

  useEffect(() => {
   localStorage.setItem('items_rate', JSON.stringify(items_rate))
  }, [items_rate])

  const newRateItem = () => {
    if(!!item_rate) {
      const newRateItem = {
        id: v4(),
        item_rate: item_rate
      }
      setItems_rate((items_rate) => [...items_rate, newRateItem])
      setItem_rate('')
    } else {
      alert('money not enter')
      setItem_rate('')
    }
  } 

Вывод в ListGroup

 <ListGroup variant="flush">
    <ListGroup.Item>{`Exp: ${item_rate}$`}</ListGroup.Item>
    </ListGroup>