How to add styles to array of Elements in React

I’m trying to make a HexGrid in React, but I cannot find a solution to add the styles of top and left to each element, in a way it renders on the screen. I tried to use the React.createElement to create the instances of Hexagon element and added the styles to it, but when I use map to render it on the screen, the styles are not there. I can see them in the console in props, but the styles are not added to the component. In Hexagon component I use Styled component to give it styles, not Css file.
Code:

import { StyledHexagonGrid } from './StyledHexagonGrid.jsx';
import Hexagon from "../Hexagon/Hexagon"
import { HexHeight, HexWidth } from '../Hexagon/StyledHexagon.jsx';


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)
        }
      }
    }
  }
  console.log(coordinates);
}

function HexagonGrid ({dataparentToChild}) {
  let passedRadius = Object.values({dataparentToChild});
  coordinatesCalc(passedRadius[0]);

  let radius = passedRadius[0];
  let columns = (2*radius -1);
  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 = (HexWidth*0.75)*i;
      let top = (k*HexHeight) + Math.abs(j*(HexHeight/2));
      // const Hex = document.createElement('Hexagon');
      // Hex.style.left = `${left}px`;
      // Hex.style.top = `${top}px`;
      // dom_content.push(<Hexagon style={{top: `${top}px`, left: `${left}px`}} />);
      dom_content.push(React.createElement('Hexagon', {style: {left: `${left}px`, top: `${top}px`}}))
    }
  }
  console.log(dom_content);

  return(
    <StyledHexagonGrid>
      {dom_content.map((item,index)=><Hexagon obj={item} key={index}/>)}
    </StyledHexagonGrid>
  );

}

export default HexagonGrid; ```