How can I create a simple heatmap with only javascript? [closed]

Im trying to create a 2 dimensional heatmap with only javascript using react. Im really lost as how to possibly do it. Appologies for the code, but this is where Im at, not understanding how I can do it. Would be very helpful of some tips on how to approach this.

const data = [
    {y: "jan", y: 2020, value: "bad"},
    {y: "feb", y: 2020, value: "good"},
    {y: "mar", y: 2020, value: "bad"},
    {y: "apr", y: 2020, value: "bad"},
    {y: "jan", y: 2021, value: "bad"},
    {y: "feb", y: 2021, value: "good"},
    {y: "mar", y: 2021, value: "bad"},
    {y: "apr", y: 2021, value: "good"},
    {y: "may", y: 2021, value: "good"},
    {y: "mar", y: 2022, value: "bad"},
    {y: "apr", y: 2023, value: "bad"},
];

const xAxis = ["jan", "feb", "mar", "apr", "may"];
const yAxis = data.map(item => item.y);

const App = () => {
    return (
        <div>
            {months.map(month => {
                return years.map(year=> {
                    return <div><h1>year</h1></div>
                })
            })}
        </div>
    )
}

The map Im trying to create:
enter image description here