Мое приложение для реагирования не рассчитывается должным образом (только после того, как второй символ отображает результат)

Я работаю над реагирующим приложением. Он имеет кнопку Добавить, чтобы добавить строку для расчета объема. Каждая строка содержит 2 поля ввода значений толщины и площади поверхности соответственно. Я заметил, что если толщина введена и пользователь начинает вводить площадь поверхности, объем будет отображаться только после второго символа.

Например, толщина - введено 100, поверхность - 1 и объем 0 (ожидается 0,1). Затем поверхность - 10 и объем 1 (как и ожидалось). То же самое, если введена поверхность 100 и толщина 1 --> объем 0 (ожидается 0,1).

Может кто-нибудь объяснить, как решить проблему, пожалуйста? Спасибо за помощь.

codesandbox

import { useState } from "react";
const App = () => {
  const [datas, setDatas] = useState([]);
  const handleChange = (index) => (event) => {
    let currentValue = +event.target.value;
    if (event.target.name === "thickness") {
      let newArr = [...datas];
      newArr[index] = { ...newArr[index], thickness: currentValue };
      if (datas[index].thickness && datas[index].surface) {
        newArr[index] = {
          ...newArr[index],
          volume: (currentValue * newArr[index].surface) / 1000,
        };
      }
      setDatas(newArr);
    }
    if (event.target.name === "surface") {
      let newArr = [...datas];
      newArr[index] = { ...newArr[index], surface: currentValue };
      if (datas[index].thickness && datas[index].surface) {
        newArr[index] = {
          ...newArr[index],
          volume: (newArr[index].thickness * currentValue) / 1000,
        };
      }
      setDatas(newArr);
    }
  };
  const removeItem = (index) => {
    let newItems = datas.filter((product, id) => id !== index);
    setDatas(newItems);
  };
  const addLine = () => {
    setDatas([
      ...datas,
      {
        thickness: 0,
        surface: 0,
        volume: 0,
      },
    ]);
  };
  return (
    <>
      {datas.map((data, index) => {
        return (
          <li key={index}>
            <input
              label="thickness mm"
              name="thickness"
              id={index}
              value={data.thickness}
              onChange={handleChange(index)}
            />

            <input
              name="surface"
              label="surface m¬2"
              id={index}
              value={data.surface}
              onChange={handleChange(index)}
            />
            <span>Volume {data.volume}</span>
            <button onClick={() => removeItem(index)}>X</button>
          </li>
        );
      })}

      <button onClick={addLine}>Add</button>
    </>
  );
};

export default App;