How do I render data matching the xAxis to create a table with react?

I want to create a grid (with yAxis being the years and months being the yAxis). How can I render the data along the xAxis? I kept searching for an answer, but cant find anything anywhere except ‘use library’. Sorry if its too beginner, but I just dont know how to do it. Thanks!

const data = [
  {
    year: 2024,
    months: [
      { monthName: "jan", value: "3%" },
      { monthName: "feb", value: "28%" },
      { monthName: "mar", value: "2%" },
      { monthName: "apr", value: "30%" },
      { monthName: "may", value: "26%" },
      { monthName: "jun", value: "20%" },
      { monthName: "dec", value: "40%" },
    ],
  },
  {
    year: 2023,
    months: [
      { monthName: "jan", value: "35%" },
      { monthName: "feb", value: "28%" },
      { monthName: "apr", value: "22%" },
    ],
  },
];

export const Grid = () => {
  return (
    <div>
      {monthsXAxis.map((month, i) => {
        return data?.map((item, i) => {
          return (
            <div>
              <div style={{ display: "flex", flexDirection: "row" }}>
                <div>
                  <h1>{item.year}</h1>
                </div>
                {item.months.map((keyVal, i) => {
                  console.log("fucking shit", keyVal);
                  return (
                    <div
                      style={{
                        backgroundColor: "pink",
                        border: "1px solid grey",
                        alignItems: "center",
                        width: 50,
                        height: 30,
                      }}
                    >
                      <p>{keyVal.value}</p>
                    </div>
                  );
                })}
              </div>
              <div style={{ display: "flex", flexDirection: "row" }}>
                <div
                  style={{ width: 50, height: 30, backgroundColor: "yellow" }}
                >
                  <Typography>{month}</Typography>
                </div>
              </div>
              ;
            </div>
          );
        });
      })}
    </div>
  );
};