I have a bar chart rendering data from a database and I'm trying to allow the user to update that data through an input tag.

   var bar = {
        type : 'bar',
        data: {
            labels: studentList,
            datasets: [
                {
                    label: "student grades",
                    data: [30, 80, 20, 10, 90,100,50],
                    backgroundColor: "turquoise",
                    width:50,
                    height:100
                

                }
            ]
        }}     

    
    
    const updateFirst = () => {
        console.log(bar.data.datasets[0].data[0])
        bar.data.datasets[0].data[0] = grade
        console.log(name, grade)
    }

    const currentClassClicked = localStorage.getItem("currentClassClicked")
    console.log(currentClassClicked)
    const [students, setStudents] = useState([])
    return (
        <div className='class-grades-container'>
            <h1>{currentClassClicked}</h1>
            <div className='class-grades-wrapper'>
                <div className='bar-chart'>
                <Bar 
                    className="bar-chart-canvas"
                    data={bar.data} 
                        />
                </div>
                <div className='change-grades'>
                    <input type="text" placeholder="First name..." onChange={((e) => setName(e.target.value))}/>
                    <input type="text" placeholder="Percentage..." onChange={((e) => setGrade(e.target.value))}/>
                    <button onClick={updateFirst}>Update grade</button>
                </div>
            </div>
        </div>

Any help would be greatly appreciated since I don't have much experience wit chart js.