Error trying to update the name of the bars react and chart

Question

import React, { useContext, useEffect } from 'react';
import { SocketContext } from '../context/SocketContext';
import Chart from 'chart.js/auto';


export const BandChart = () => {

    const { socket } = useContext( SocketContext );

    useEffect(() => {
        socket.on('current-bands', (bands) => {
            crearGrafica(bands)
        })
    }, [ socket ])
    var myChart;
    
    const crearGrafica = (bands=[]) =>{
        console.log(bands.map(band => band.name))
        var ctx = document.getElementById('myChart');
        if(myChart instanceof Chart)
        {
            myChart.destroy();
        }
        myChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: bands.map(band => band.name),
                datasets: [{
                    label: '# of Votes',
                    data: [12, 19, 3, 5, 2, 3],
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(255, 206, 86, 0.2)',
                        'rgba(75, 192, 192, 0.2)',
                        'rgba(153, 102, 255, 0.2)',
                        'rgba(255, 159, 64, 0.2)'
                    ],
                    borderColor: [
                        'rgba(255, 99, 132, 1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 206, 86, 1)',
                        'rgba(75, 192, 192, 1)',
                        'rgba(153, 102, 255, 1)',
                        'rgba(255, 159, 64, 1)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {indexAxis: 'y',
                scales: {
                    x: {
                        stacked: true,
                        beginAtZero: true
                    }
                }
            }
        });  
    }
     

    return (
        <canvas id="myChart"></canvas>
    )
}

I put the destroy and now i have no errors but now i cant update the names of the bands

import React, { useContext, useEffect, useState } from 'react';
import { SocketContext } from '../context/SocketContext';

export const BandList = () => {

    const [ bands, setBands ] = useState([]);
    const { socket } = useContext( SocketContext );

    useEffect(() => {
        socket.on('current-bands', (bands) => {
            setBands( bands );
        })
        return () => socket.off('current-bands');
    }, [ socket ])


    const cambioNombre = ( event, id ) => {
        const nuevoNombre = event.target.value;
        
        setBands( bands => bands.map( band =>{
            if ( band.id === id ) {
                band.name = nuevoNombre;
            }
            return band;
        }));
    }

    const onPerdioFoco = (id, nombre) => {
        socket.emit( 'cambiar-nombre-banda', { id, nombre });
    }

    const votar = ( id ) => {
        socket.emit( 'votar-banda', id );
    }

    const borrar = ( id ) => {
        socket.emit( 'borrar-banda', id );
    }


    const crearRows = () => {
        return (
            bands.map( band => (
                <tr key={ band.id }>
                    <td> 
                        <button 
                            className="btn btn-primary"
                            onClick={ () => votar( band.id ) }
                        > +1 </button>
                    </td>
                    <td>
                        <input 
                            className="form-control"
                            value={ band.name }
                            onChange={ (event) => cambioNombre( event, band.id ) }
                            onBlur={ () => onPerdioFoco( band.id, band.name ) }
                        />
                    </td>
                    <td> <h3> { band.votes } </h3> </td>
                    <td>
                        <button 
                            className="btn btn-danger"
                            onClick={ () => borrar( band.id ) }
                        >
                            Borrar
                        </button>
                    </td>
                </tr>
            ))
        );
    }


    return (
        <>

            <table className="table table-stripped">
                <thead>
                    <tr>
                        <th></th>
                        <th>Nombre</th>
                        <th>Votos</th>
                        <th>Borrar</th>
                    </tr>
                </thead>
                <tbody>
                    { crearRows() }
                </tbody>
            </table>

        </>
    )
}

const Band = require ("./band")
class BandList{
    constructor() {
        this.bands =[
        new Band ("Metallica"),
        new Band ("ACDC"),
        new Band ("Green Day"),
        new Band ("El Canto del Loco"),
    ]
    }

    addband(name){
        const newBand = new Band (name );
        this.bands.push (newBand);
        return this.bands 
    }
    removeBand(id){
        this.bands = this.bands.filter(band => band.id !== id )
    }
    getBands(){
        return this.bands
    }  
    increaseVotes(id){
        this.bands = this.bands.map(band =>{
            if (band.id === id){
                band.votes +=1
            }
            return band
        })
    }
    changeName(id, newName){
        this.bands = this.bands.map(band =>{
            if (band.id === id){
                band.name = newName;
            }
            return band
        })
    }
}

module.exports = BandList;

I can add votes and new bands without problem, the issue is just updating the name of the bands that I have.