useStateで配列の中身を更新したいが、意図したように変更されない

Question

現在、勉強の成果を記録するアプリを実装中です。

react-chartjs-2（4.0.0）を用いて、折れ線グラフを導入しており、ユーザーが「今日の日付」と「今日やる予定だったTODOの個数」をinputタグで打ち込み、送信ボタンを押すことで、グラフの値を動的に変化させたいと考えています。

【聞きたいこと】
横並びでデータを追加したいのですが、下記画像のように、縦に日付が追加されてしまいます。（黒の枠で囲んである部分です。）

---

本来は、このような処理を望んでいます。

下記、コードになります。（変数の'date'と'data'が見分けにくいと思います。すみません。）

↓LineChart.js

import React, { useState, useRef } from 'react'
import { Button } from '@chakra-ui/react';
import { Line } from 'react-chartjs-2'
import {
    Chart as ChartJS,
    CategoryScale,
    LinearScale,
    PointElement,
    LineElement,
    Title,
    Tooltip,
    Legend,
} from "chart.js";

ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend);

const LineChart = () => {
    const [numData, setNumData] = useState(0)
    const [date, SetDate] = useState('')

    const calVal = useRef(null)
    const chooseDate = useRef(null)

    const onClick = () => {
        setNumData(calVal.current.value);
        calVal.current.value = '';

        SetDate(chooseDate.current.value);
        SetDate([...date, chooseDate.current.value])
        chooseDate.current.value = '';
    }


    const data = {
        labels: [date],
        datasets: [
            {
                label: 'どのくらい達成できたかな？',
                fill: true,
                lineTension: 0.1,
                backgroundColor: 'rgba(75,192,192,0.4)',
                borderColor: 'rgba(75,192,192,1)',
                borderCapStyle: 'round',
                borderDash: [],
                borderDashOffset: 0.0,
                borderJoinStyle: 'square',
                pointBorderColor: 'rgba(75,192,192,1)',
                pointBackgroundColor: '#eee',
                pointBorderWidth: 10,
                pointHoverRadius: 5,
                pointHoverBackgroundColor: 'rgba(75,192,192,1)',
                pointHoverBorderColor: 'rgba(220,220,220,1)',
                pointHoverBorderWidth: 1,
                pointRadius: 1,
                pointHitRadius: 10,
                data: [3, 10, 7, 5, 8, 4, numData]
            }
        ]
    };

    const clearDate = () => {
        console.log(data.labels)
        data.labels.splice(0);
    }

    const checkOfDelete = () => {
        let result = window.confirm('データをリセットします。よろしいですか？')
        
        if(result) {
            clearDate();
            console.log('削除しました。');
        } else {
            alert('削除できませんでした。')
        }
    }
    
    return (
        <div mt='2'>
            <Line data={data}/>
            <input ref={chooseDate} type='text' label='曜日' placeholder='今日の曜日'/>
            <input ref={calVal} type='number' label='number' placeholder='何個達成できた？'/>
            <br/>
            {data.labels.length < 8 ? <Button onClick={onClick}>送信!</Button> : <p>曜日がいっぱいだよ。</p>}
            <Button onClick={checkOfDelete} ml="10">リセット</Button>
        </div>
    )
}

export default LineChart

↓App.js

import React, { useRef } from 'react';

import { useTodo } from './hooks/useTodo';
import TodoTitle from './components/TodoTitle';
import TodoAdd from './components/TodoAdd';
import TodoList from './components/TodoList';
import Time from './components/Time';
import LineChart from './components/LineChart';

import { Container } from '@chakra-ui/react';
import { AddIcon } from '@chakra-ui/icons';

function App() {
  const {
    todoList,
    addTodoListItem,
    toggleTodoListItemStatus,
    deleteTodoListItem
  } = useTodo();

  const inputEl = useRef(null);

  const handleAddTodoListItem = () => {
    if (inputEl.current.value === "") return;
    addTodoListItem(inputEl.current.value);
    inputEl.current.value = "";
  };

  const inCompletedList = todoList.filter((todo) => {
    return !todo.done;
  });

  const completedList = todoList.filter((todo) => {
    return todo.done;
  });

  return (
    <>
      <Container centerContent p={{ base: "4", md: "6" }} maxWidth="3xl">
        <Time/>
        <TodoTitle
          title="今日やること"
          as="h1"
          fontSize={{ base: "2xl", md: "3xl" }}
        />
        <TodoAdd
          placeholder="ADD TODO"
          leftIcon={<AddIcon />}
          buttonText="TODOを追加"
          inputEl={inputEl}
          handleAddTodoListItem={handleAddTodoListItem}
        />
        <TodoList
          todoList={inCompletedList}
          toggleTodoListItemStatus={toggleTodoListItemStatus}
          deleteTodoListItem={deleteTodoListItem}
          title="これからやること"
          as="h2"
          fontSize={{ base: "xl", md: "2xl" }}
        />
        <TodoList
          todoList={completedList}
          toggleTodoListItemStatus={toggleTodoListItemStatus}
          deleteTodoListItem={deleteTodoListItem}
          title="やったよ!"
          as="h2"
          fontSize={{ base: "xl", md: "2xl" }}
        />
        <LineChart pl='50' mt='1'/>
        
      </Container>
      
    </>
  );
}

export default App;

エンジニアの方々のお力を貸していただければと思い、質問させていただきました。
ご教授いただけると幸いです。

よろしくお願い致します。

Answer 1

これで治せるかどうかわかんないですけど、今のdate配列を使って新しい値を追加したい時はそのままdate配列を使うのではなく

SetDate(prevDate=>[…prevDate, chooseDate.current.value])

のようにSetDateから現在のdate配列を取らないと変な挙動になってしまいます