React Hooks: useState не обновляет состояние при первом щелчке обработчика

Question

Когда я нажимаю кнопку, запускается обработчик, но требуется еще один щелчок, чтобы фактически вывести sh значение состояния в массив:

Вот мой общий код с перерывами того, что я пробовал:

<code>import { Button, Header, Message, Table, TextArea } from 'semantic-ui-react';
import React, { useState, useEffect, useCallback } from 'react';

export default function Day({ dayInfo }) {
  var [dayInfoInChild, setDayInfoInChild] = useState({});
  var [currentDate, setCurrentDate] = useState('');
  var [amountOfRows, setAmountOfRows] = useState(24);
  var [textValue, setTextValue] = useState('');
  var [textValueContainer, setTextValueContainer] = useState([]);

  function handleChange(e) {
    e.persist();
    setTextValue(e.target.value);
  }

  function handleClick(e, timeOfDayAndHour) {
    e.persist();
    e.preventDefault();

    setTextValueContainer((textValueContainer) => [
      ...textValueContainer,
      textValue,  /* <==== This should be adding from handleChange i.e. e.target.value into textContainer */
    ]);

    setDayInfoInChild({
      ...dayInfoInChild,
      [currentDate]: {
        [timeOfDayAndHour]: {
          message: textValueContainer,
        },
      },
    });
  }

  useEffect(() => {
    if (dayInfo !== null) {
      var modifiedDayInfo = dayInfo
        .split(' ')
        .map((item) => {
          if (item.indexOf(',')) return item.replace(/,/g, '');
        })
        .join('-');

      setCurrentDate(modifiedDayInfo);

      if (localStorage.getItem(modifiedDayInfo)) {
        var stringVersionOfModifiedDayInfo = modifiedDayInfo;

        modifiedDayInfo = JSON.parse(localStorage.getItem(modifiedDayInfo));

        if (!dayInfoInChild.hasOwnProperty(stringVersionOfModifiedDayInfo)) {
          setDayInfoInChild({
            ...dayInfoInChild,
            [stringVersionOfModifiedDayInfo]: modifiedDayInfo,
          });
        }
      } else {
        localStorage.setItem(modifiedDayInfo, JSON.stringify({}));
      }
    }
  }, [dayInfo]);

  useEffect(() => {
    return () => textValue; Because this value could change many times shouldn't this be correct?
  }, [textValue]);


  return (
    <>
     <h1>{dayInfo}</h1>
      <Table celled structured>
        <Table.Body>
          {Array.from(Array(amountOfRows)).map((row, index) => {
            return (
              <React.Fragment key={index}>
                <Table.Row>
                  <Table.Cell rowSpan="2" style={tableStyle}>
                    {TimeOfDaySetter(index)}
                  </Table.Cell>
                  <Table.Cell style={tableStyle}>
                    {
                      <strong>
                        {setExactHourHelper(index)}
                        :00
                      </strong>
                    }
                    <Message>
                      <Message.Header>Form data:</Message.Header>
                    </Message>
                    <TextArea
                      rows={2}
                      name="textarea"
                      onChange={(e) => handleChange(e)}
                      placeholder="Tell us more"
                    />
                    <Button
                      fluid
                      attached="bottom"
                      content="submit"
                      onClick={(e) => {
                        handleClick(
                          e,
                          `${setExactHourHelper(index)}-${
                            index < 12 ? 'AM' : 'PM'
                          }`
                        );
                      }}
                    />
                  </Table.Cell>
                </Table.Row>
                <Table.Row>
                  <Table.Cell style={(tableStyle, colorOveride)}>
                    {
                      <strong>
                        {setExactHourHelper(index)}
                        :30
                      </strong>
                    }
                    <Message>
                      <Message.Header>Form data:</Message.Header>
                      <pre>

handleChange (e)} placeholder = "Расскажите подробнее" /> <Кнопка флюида прикреплена = "bottom" content = "submit" onClick = {handleClick} // onKeyPress = {this.handleKeyPress} /> < /Table.Row> ); })} </>); }

Итак, я попробовал что-то вроде этого, что на первом blu sh похоже на путь к go ... Но потом я получаю: TypeError: e.persist is not a function

useEffect(()=>{

  window.addEventListener('click', handleClick);

  return()=>{
    window.removeEventListener('click', handleClick);
 }
},[textValue])

Любая помощь будет признательна!

Обновление

Это ссылка на codesandbox моего кода ...