Keys with right values in react-chartjs-2 with MUI Multiple Select

I was wondering why when i select a label (key), the data in the graph (value) is displayed randomly. The behaviour of the chart and the multiple selector work well together however the value is displayed without connection with the key therefore the columns have random values.

I have tried many options such as include indexes after .map, ids, among other attempts however nothing worked.

import OutlinedInput from '@mui/material/OutlinedInput';
import InputLabel from '@mui/material/InputLabel';
import MenuItem from '@mui/material/MenuItem';
import FormControl from '@mui/material/FormControl';
import ListItemText from '@mui/material/ListItemText';
import Select from '@mui/material/Select';
import Checkbox from '@mui/material/Checkbox';
import React, { useState } from "react";
import { Bar } from "react-chartjs-2";
import axiosInstance from '../../axios';

const ITEM_HEIGHT = 48;
const ITEM_PADDING_TOP = 8;
const MenuProps = {
  PaperProps: {
    style: {
      maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
      width: 250,
    },
  },
};

export default function VerticalBar() {
  const [label, setLabel] = useState([]);
  const [data, setData] = useState([]);
  const [krakenName, setKrakenName] = useState([]);
  
  React.useEffect(() => {
    axiosInstance
      .get('kraken/')
      .then(result => {
        setLabel(Object.keys(result.data).map(key => result.data[key].altname));
        setData(Object.keys(result.data).map(key => result.data[key].pair_decimals));
        // if (krakenName === [0]) setData[0];
        // else if (krakenName === [1]) setData[1];
      });
  }, [setLabel, setData, setKrakenName]);
  
  const handleChange = (event) => {
    const {
      target: { value },
    } = event;
    setKrakenName(typeof value === 'string' ? value.split(',') : value,);
    console.log('event ++++++', data);
  };

    return (
    <div>
       <h1>Vertical Bar</h1>
       <div>
       <FormControl sx={{ m: 1, width: 300 }}>
        <InputLabel id="demo-multiple-checkbox-label">Kraken</InputLabel>
        <Select
          labelId="demo-multiple-checkbox-label"
          id="demo-multiple-checkbox"
          multiple
          value={krakenName}   
          onChange={handleChange}
          input={<OutlinedInput label="Kraken" />}
          renderValue={(selected) => selected.join(', ')}
          MenuProps={MenuProps}
        >
          
          {label.map((name) => ( 
            <MenuItem key={name} id={name} value={name}>   
              <Checkbox checked={krakenName.indexOf(name) >-1} />
              <ListItemText primary={name} />
            </MenuItem>         
          ))}
        </Select>
      </FormControl>
       </div>
      <Bar
        data={{
        labels: krakenName,
        datasets: [
          {
            label: ['Pair Decimals'],
            backgroundColor: 'rgba(255,99,132,0.2)',
            borderColor: 'rgba(255,99,132,1)',
            borderWidth: 1,
            hoverBackgroundColor: 'rgba(255,99,132,0.4)',
            hoverBorderColor: 'rgba(255,99,132,1)',
            data: data,
          },
          
        ],
      }} 
      />
    </div>
  );
}