Centering the text in nodes with a <foreignObject> tag

LogiNode.tsx

import { RenderCustomNodeElementFn } from "react-d3-tree/lib/types/common";

export const LogiNode: RenderCustomNodeElementFn = ({ nodeDatum, toggleNode}) => {
  const [x, y] = [0, -50];
  const [width, height] = [100, 100];
  return(
  <g>
    <rect x={x} y={y} width={width} height={height} onClick={toggleNode}>
    </rect>
    <foreignObject x={x} y={y} width={width} height={height}>
      <div className="html-in-node">
        <div className="text">
          {nodeDatum.name}
        </div>
      </div>
    </foreignObject>      
  </g>
    )
}

LogiTree.css

.tree-container {
  width: 100%;
  height: 100%;
}

.html-in-node  {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.html-in-node > .text {
  width: 95%;
  height: 95%;
  display: flex;
  justify-content: center;
  align-items: center;
}