Colors from data not being displayed in Nivo ResponsiveBar

I have a ResponsiveBar component in my React app, but the colors are not being displayed as intended. I have followed the guidelines in the official docs. the data looks like this:

{
  "data": [
    {
      "bucket": "Prospects Imported",
      "Oliver Queen": 10,
      "Oliver QueenColor": "hsl(177.06123087721252,18.89068530574307%,16.53273587631816%)",
      "Ray Palmer": 10,
      "Ray PalmerColor": "hsl(287.8197874078934,62.18829850513416%,13.604789291455033%)"
    },
    {
      "bucket": "Assigned",
      "Oliver Queen": 158,
      "Oliver QueenColor": "hsl(130.29946551632844,21.88588940442986%,85.78716216902176%)",
      "Ray Palmer": 2,
      "Ray PalmerColor": "hsl(192.1716868789712,1.8797192964029374%,7.158239130186517%)"
    },
    {
      "bucket": "Calls Made",
      "Oliver Queen": 24,
      "Oliver QueenColor": "hsl(164.04170858156496,47.95430493222506%,79.37512126292603%)",
      "Ray Palmer": 0,
      "Ray PalmerColor": "hsl(38.148811405937096,23.83917214972724%,37.366418973565544%)"
    },
    {
      "bucket": "Emails Sent",
      "Oliver Queen": 120,
      "Oliver QueenColor": "hsl(316.96830604521773,3.6081626612787465%,54.49458825991964%)",
      "Ray Palmer": 0,
      "Ray PalmerColor": "hsl(223.97078722168806,98.41710495281106%,47.3590863956761%)"
    },
    {
      "bucket": "Texts Sent",
      "Oliver Queen": 0,
      "Oliver QueenColor": "hsl(83.50359081784423,77.57558426662207%,3.9445038120280884%)",
      "Ray Palmer": 0,
      "Ray PalmerColor": "hsl(127.2531925420342,14.870911431246302%,27.26153404734799%)"
    }
  ],
  "keys": [
    "Oliver Queen",
    "Ray Palmer"
  ]
}

I am passing the data and keys as props to the ResponsiveBar. currently the bar chart looks like this with wrong colors:

as you can see the colors from the data are not reflected.

here is my ResponsiveBar component:

<ResponsiveBar
                    data={chartListSection.data}
                    keys={chartListSection.keys}
                    indexBy="bucket"
                    margin={{ top: 50, right: 50, bottom: 110, left: 60 }}
                    padding={0.3}
                    valueScale={{ type: 'linear' }}
                    indexScale={{ type: 'band', round: true }}
                    colors={{ scheme: 'nivo' }}
                    defs={[
                      {
                        id: 'dots',
                        type: 'patternDots',
                        background: 'inherit',
                        color: '#38bcb2',
                        size: 4,
                        padding: 1,
                        stagger: true,
                      },
                      {
                        id: 'lines',
                        type: 'patternLines',
                        background: 'inherit',
                        color: '#eed312',
                        rotation: -45,
                        lineWidth: 6,
                        spacing: 10,
                      },
                    ]}
                    borderColor={{
                      from: 'color',
                      modifiers: [['darker', 1.6]],
                    }}
                    axisTop={null}
                    axisRight={null}
                    axisBottom={{
                      tickSize: 5,
                      tickPadding: 5,
                      tickRotation: 0,
                      legend: '',
                      legendPosition: 'middle',
                      legendOffset: 32,
                    }}
                    axisLeft={{
                      tickSize: 5,
                      tickPadding: 5,
                      tickRotation: 0,
                      legend: 'Prospects',
                      legendPosition: 'middle',
                      legendOffset: -53,
                    }}
                    labelSkipWidth={12}
                    labelSkipHeight={12}
                    labelTextColor={{
                      from: 'color',
                      modifiers: [['darker', 1.6]],
                    }}
                    legends={[
                      {
                        dataFrom: 'keys',
                        anchor: 'bottom-left',
                        direction: 'row',
                        justify: false,
                        translateX: 0,
                        translateY: 90,
                        itemsSpacing: 2,
                        itemWidth: 100,
                        itemHeight: 20,
                        itemDirection: 'left-to-right',
                        itemOpacity: 0.85,
                        symbolSize: 20,
                        effects: [
                          {
                            on: 'hover',
                            style: {
                              itemOpacity: 1,
                            },
                          },
                        ],
                      },
                    ]}
                    animate={true}
                    motionStiffness={90}
                    motionDamping={15}
                  />

How do make the colors from data display in the bar?

You can set the colors props with a function mapping to your color field :

<ResponsiveBar
    ......
    colors={({id, data}) => data[`${id}Color`]}
    ......
/>

In the above code, color ends with Color in your data

Sample result:

Sandbox