This is the code:

import React from 'react';
import {connect} from 'react-redux';
import {vote} from '../store/actions';
import BarChart from "../services/BarChart";
import {color} from '../services/color'


const Poll = ({poll, vote}) => {

    const answers = poll.candidates && poll.candidates.map(candidate => (
        <button onClick={() => vote(poll._id, {answer: candidate.candidate})} key={candidate._id}> {candidate.candidate} </button>
    ));

   const data = {
        labels: poll.candidates.map(candidate => candidate.candidate),
        datasets: [
            {
                label: poll.position,
                backgroundColor: poll.candidates.map(candidate => color()),
                borderColor: '#323643',
                data: poll.candidates.map(candidate => candidate.votes)
            }
        ]
   }
    

        
    return <div>
        <h3>{poll.position}</h3>
        <div>{answers}</div>
        <BarChart chartData={data} />
    </div>
};


export default connect(store => ({
    poll: store.currentPoll
}),{vote},)(Poll);

I'm trying to graph a chart using data maping. I don't know what should be the correct syntax here. Image error link below.

Error:

Browser Error Console Error