[React] Problema con dataset da browser o da api

[fermat]

ciao!

una api mi tira fuori i dati in questo modo:

data: {
    labels: ['January', 'February', 'March', 'April'],
    datasets: [
        {
            label: 'Allenamento',
            backgroundColor: '#369365',
            data: [1, 2, 10, 7,]
        }, {
            label: 'Arrampicata',
            backgroundColor: '#ED230B',
            data: [12, 7, 3, 16,]
        }, {
            label: 'Arrampicata su roccia', backgroundColor: '#7B9B28', data: [7, 9, 3,]
        }, {
            label: 'Ciaspole',
            backgroundColor: '#BC6D1E',
            data: [1,]
        }, {
            label: 'Corsa', backgroundColor: '#CFD8B8', data: [5, 5, 8, 6,]
        }, {
            label: 'Ferrata',
            backgroundColor: '#713923',
            data: [1,]
        }, {
            label: 'Sci', backgroundColor: '#62E3D9', data: [3,]
        }, {
            label: 'Yoga',
            backgroundColor: '#35744B',
            data: [1,]
        }
    ]
}

questi dati sono copiati e incollati dal browser.
ci devo costruiire un grafico per React.
ora, se metto questi dati nel codice, funziona.
se li prendo dall'api no, ottenendo questo errore:

TypeError: can't assign to property "datasets" on "data: {labels:  ['January','February','March','April'],datasets: [{label:  'Allenamento',backgroundColor: '#F8964E',data: [1,2,10,7,]},{label:  'Arrampicata',backgroundColor: '#50EE50',data: [12,7,3,16,]},{label:  'Arrampicata su roccia',backgroundColor: '#1DFB84',data:  [7,9,3,]},{label: 'Ciaspole',backgroundColor: '#02C2EB',data:  [1,]},{label: 'Corsa',backgroundColor: '#1731B3',data:  [5,5,8,6,]},{label: 'Ferrata',backgroundColor: '#782B75',data:  [1,]},{label: 'Sci',backgroundColor: '#F8B3B9',data: [3,]},{label:  'Yoga',backgroundColor: '#D5DEE0',data: [1,]}]}": not an object

questo il codice:

constructor(props) {
    super(props);

    this.allenamentiService = new AllenamentiService();

    this.state = {
        dataApi: null,
        data: {
            labels: ['January', 'February', 'March', 'April'],
            datasets: [
                {
                    label: 'Allenamento',
                    backgroundColor: '#369365',
                    data: [1, 2, 10, 7,]
                }, {
                    label: 'Arrampicata',
                    backgroundColor: '#ED230B',
                    data: [12, 7, 3, 16,]
                }, {
                    label: 'Arrampicata su roccia', backgroundColor: '#7B9B28', data: [7, 9, 3,]
                }, {
                    label: 'Ciaspole',
                    backgroundColor: '#BC6D1E',
                    data: [1,]
                }, {
                    label: 'Corsa', backgroundColor: '#CFD8B8', data: [5, 5, 8, 6,]
                }, {
                    label: 'Ferrata',
                    backgroundColor: '#713923',
                    data: [1,]
                }, {
                    label: 'Sci', backgroundColor: '#62E3D9', data: [3,]
                }, {
                    label: 'Yoga',
                    backgroundColor: '#35744B',
                    data: [1,]
                }
            ]
        }
    };
}

async componentDidMount() {
    await this.allenamentiService.getMesiAnno().then(data => {
            this.setState({
                dataApi: data
            })
        }
    )
    console.log(this.state.dataApi);
}

il console.log mi tira fuori questo:

data: {labels: ['January','February','March','April'],datasets: [{label: 'Allenamento',backgroundColor: '#61F0DC',data: [1,2,10,7,]},{label: 'Arrampicata',backgroundColor: '#22FE5D',data: [12,7,3,16,]},{label: 'Arrampicata su roccia',backgroundColor: '#3F4F0A',data: [7,9,3,]},{label: 'Ciaspole',backgroundColor: '#E5A93C',data: [1,]},{label: 'Corsa',backgroundColor: '#6F56C6',data: [5,5,8,6,]},{label: 'Ferrata',backgroundColor: '#A40400',data: [1,]},{label: 'Sci',backgroundColor: '#85CAA7',data: [3,]},{label: 'Yoga',backgroundColor: '#EB7E12',data: [1,]}]}