Im trying to make a Hexagon Grid and each of the Hexes to have data props with coordinates x y z and with value. I've managed to make the logic to create the grid and coordinates, but I can't figure out how to connect them. When I try to assign x,y,z props the TypeError pops out, saying I cannot change props in Element. The code:

import { StyledHexagonGrid } from './StyledHexagonGrid.jsx';
import Hexagon from '../Hexagon/Hexagon.jsx';

export const coordinatesCalc = (radius) => {
  let coordinateRadius = radius - 1;
  let coordinates = [];
  for (let x = -coordinateRadius; x < coordinateRadius + 1; x++) {
    for (let z = -coordinateRadius; z < coordinateRadius + 1; z++) {
      for (let y = -coordinateRadius; y < coordinateRadius + 1; y++) {
        let sum = x + y + z;
        let coordinate = { x, y, z };
        if (sum === 0) {
          coordinates.push(coordinate);
        }
      }
    }
  }
  return coordinates;
};

function HexagonGrid({ dataparentToChild }) {
  let passedRadius = Object.values({ dataparentToChild });
  let radius = passedRadius[0];
  let columns = 2 * radius - 1;
  let height = 600 / columns;
  let width = height * 1.1547;
  let dom_content = [];
  for (let i = 0, j = radius - 1; i < columns; i++, j--) {
    for (let k = 0; k < columns - Math.abs(j); k++) {
      let left = width * 0.75 * i;
      let top = k * height + Math.abs(j * (height / 2));

      dom_content.push(
        <StyledHexagon
          style={{
            top: `${top}px`,
            left: `${left}px`,
            width: `${width}px`,
            height: `${height}px`,
          }}
          data-x=''
          data-y=''
          data-z=''
          value=''
        />
      );
    }
  }
    console.log(dom_content);
  let coordinates = coordinatesCalc(radius);
  let hexElements = [];
  for(let i=0;i<coordinates.length;i++){
    let el = dom_content[i];
    el.props.x = coordinates[i].x;
    el.props.y = coordinates[i].y;
    el.props.z = coordinates[i].z;
    hexElements.push(el);
  }
  console.log(hexElements);


  return (
    <StyledHexagonGrid>
      <Hexagon
        dataparentToChild={passedRadius[0]} 
      />
    </StyledHexagonGrid>
  );
}

export default HexagonGrid;