trying update the content of array with useState, but it doesn’t work

I’m new and practicing react.js.
I’m trying to update the content of array with useState by clicking a send-button, but it doesn’t work as I expect.

---

Below is problem I’m having. Idk to add date and number in a row.
enter image description here

also, below is what I expect.
enter image description here

code:

import React, { useState, useRef } from 'react';
import classes from '../style/LineChart.module.css'
import { Button, Input } 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: 'How many todos can you achieve？',
            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: [numData]
        }
    ]
};

const checkOfDelete = () => {
    let result = window.confirm('Reset. ok?')
    
    if(result) {
        console.log('Delete.');
    } else {
        alert('fail.')
    }
};

return (
    <div mt='2'>
        <Line data={data}/>
        <Input className={classes.input} ref={chooseDate} variant='outline' w='40%' ml='30%' mb='3' mt='3' borderRadius='15px' type='text' label='date' placeholder='Date'/>
        <Input className={classes.input} ref={calVal} variant='outline'  w='54%' ml='23%' mb='3' borderRadius='15px' type='number' label='number' placeholder='How many？'/>
        <br/>
        {data.labels.length < 8 ? <Button colorScheme='teal' ml='21%' mr='2' onClick={onClick}>Send</Button> : <p>date is full.</p>}
        <Button colorScheme='teal' onClick={checkOfDelete} >Reset</Button>
    </div>
)
};

export default LineChart;

---

To work well, I’ve tried this way.

const data = {
    labels: [calVal.current.value ,...date],
    datasets: [
        {
            label: 'How many todos can you achieve？',
            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: [chooseDate.current.value,...numData]
        }
    ]
};

but if this, I got error like: “Uncaught TypeError: Cannot read properties of null (reading ‘value’)”
Can someone please help me? I am sorry if it is very basic but I am only starting out..