Tengo un gráfico de barras que representa datos de una base de datos y estoy tratando de permitir que el usuario actualice esos datos a través de una etiqueta de entrada.

 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>

Cualquier ayuda sería muy apreciada ya que no tengo mucha experiencia con chart js.