Distributed Bar Chart fill colors can't be set per bar when used in apex mixed chart

I'm creating some dashboard charts in react using apex chart. This chart is mixed with two types line & bars. What I need to to do is to change color of each bar. Which is not working. Any ideas on solving this. I saw this as an issue on github which hasn't been resolved.

https://github.com/apexcharts/apexcharts.js/issues/1333

Here are Some images of the chart when only stroke color is changin:

const ProjectionChart = () => {
  let projection = [110, 505, 111, 671, 227, 113, 201, 352, 752, 
  320]

  let socialMedia = [110, 505, 111, 641, 250, 113, 201, 152, 252, 
  320]

function compare(){
    let colors = [];
    for(let i = 0; i < projection.length; i++){
        if(projection[i] > socialMedia[i]){
            colors.push("#00bb06")
        } else {
            colors.push("#ff0000") 
        }
    }
    return colors
}
const [chart, setChart] = useState(
    {
        options: {
            chart: {
                height: 50,
                type: 'bar',
                toolbar: {
                    show: false
                },
            },   
            colors: compare(),
            fill: {
              colors: compare()
            },
            stroke: {
                colors: compare()
            },
            plotOptions: {
                bar: {
                    distributed: true,
                },
            },
            legend: {
                show: true,
                position: 'top',
                horizontalAlign: 'right', 
                fontSize: '14px',
                fontFamily: 'Poppins-Regular',
            },
            stroke: {
                curve: 'straight'
            },
            dataLabels: {
                enabled: true,
                enabledOnSeries: [1, 2]
            },
            labels: ['Jan', 'Feb', 'March', 'April', 'May', 'June', 'July', 'Aug', 'Sep', 'Oct'],
        }
    }
)
const [series, setSeries] = useState(
    [
        {
            name: 'Project 1',
            type: 'bar',
            data: projection,
        },
        {
            name: 'Social Media',
            type: 'line',
            data: socialMedia,
        }
    ],
)

return(
    <div className="chart-container">
        <Container maxWidth={'xl'}>
            <div className="d-flex align-items-center justify-content-between mb-100">
                <h2 className="promoter-h2-title">ROI Chart</h2>
            </div>
            <Chart
                options={chart.options}
                series={series}
                width="90%"
            />
        </Container>
    </div>
)}