I am currently trying to get the dimensions / bounding rect of some jsx I return from a function. Every post I've seen online says to create a ref and use element.current.getBoundingRect(). However, I cannot do this with my code as I am using a function to dynamically build this jsx and put it into an object rather than making full react components.

Is there any way I can do this? Or is this not possible?

The only thing I can thing of is maybe dynamically creating a new full functional component in my .forEach instead of just creating jsx in a fragment, but when I tried that it still didn't work as I had no way to access the ref after.

EDIT: Here's how I'm making my jsx

export const createNodeTypes = (data) => {
  const nodesList = {};
  if (data) {
    data.forEach(({ node }) => {
        const newNode = () => (
          <>
            <div>
              <[insert other jsx here]>
            </div>
          </>
        );
        nodesList[node.name] = newNode;
      });
  }
  return nodesList;
};

It's worth noting the reason I'm doing it this way is for creating a nodeTypes object like react-flow-renderer is expecting for custom node types