How can I map an array to heatmap in react using react-heatmap-grid?

Question

I am new to coding and decided to use react-heatmap-grid for heatmap in a web application. I have tried numerous ways and searched the internet but I didn't find an answer. I have 7 rows and 24 columns for days and hours (which makes 168 cells) and im trying to get the data in correctly. Right now it maps the whole array in each cell but I need every element in array in different cell. Currently the mapping of data looks like this:

const testArr = [];
for (var i = 1; i<169; i++){
        testArr.push(i);
    }
    const data = new Array(yLabels.length)
            .fill(0)
            .map(() => 
                new Array(xLabels.length)
                    .fill(0)
                    .map(() => TestArr)
            )

And the heatmap is created like this:

<div className='heatmap'>
                <HeatMap
                    xLabels={xLabels}
                    yLabels={yLabels}
                    yLabelWidth={150}
                    xLabelsLocation={"top"}
                    xLabelsVisibility={xLabelsVisibility}
                    data={data}
                    cellStyle={(background, value, min, max, data, x, y) => ({
                        background: `rgb(127,255,0, ${1 - (max - value) / (max - min)})`,
                        fontSize: "12px",
                        fontFamily: "Arial",
                        color: `rgb(30,0,0)`,
                    })}
                    cellRender={value => value && `${value}`}
                />
            </div>

How can I insert the data in cells so that they all wouldn't have the array in them?

Answer 1

I ditched the mapping and found another solution. Instead of mapping the data, I just use an array of arrays and send it trough to heatmap as data.

<div className='heatmap'>
                <HeatMap
                    xLabels={xLabels}
                    yLabels={yLabels}
                    yLabelWidth={150}
                    xLabelsLocation={"top"}
                    xLabelsVisibility={xLabelsVisibility}
                    data={arrayOfArrays}
                    ...