I want to plot my historgram bar with different colors for A, B, C but I have my 3 bars with the same color i.e black, I guess it's in the fill field issue. If I plot only one bar then it's printed wirth the right color, but when it's more than 1 then it's all black. I'm using recharts

Any idea please ?

export default function Overview() {
    const { ratingBar } = graphs ?? {}

    const COLORS = {
        'A': 'red',
        'B': 'green',
        'C': 'orange',
    }

    function ratingGraph() {
        const data = ratingBar
        return ({
            graph: {
                type: 'bar',
                showTooltip: true,
                showXAxis: true,
                showYAxis: true,
                showLegend: true,
                container: {
                    data,
                },
                bars: [
                    {
                        dataKey: 'count',
                        fill: COLORS[data.map((m) => m.title)],
                    }
                ],
                xaxis: {
                    dataKey: 'title',
                    tick: { style: { fontSize: '.9rem' } },
                },
                yaxis: {
                    dataKey: 'count',
                    domain: [0, 100],
                },
            },
        }).graph
    }

    return (
        <div >

            {...ratingGraph()}

        </div>
    )
}

Here is my data from my api :

{
    "ratingBar": [
        {
            "title": "A",
            "count": 2
        },
        {
            "title": "B",
            "count": 48
        },
        {
            "title": "C",
            "count": 78
        }
    ]
}