How to give Grid Items of a React Grid layout a reference

Question

Im trying to have a dynamic array of references. These references would come from the Grid items, that are being mapped from a list to the Grid Layout-Element.

This is my code:

<GridLayout
                        layout = {layout}
                        onLayoutChange={(currentLayout) => {onLayoutChange(currentLayout)}}
                        onDragStop={currentLayout => onDragStop(currentLayout)}
                        onDropDragOver={onDropDragOver}
                        onDrop={(currentLayout,item,_event) => onDrop(item,_event)}
                        onResizeStart={(layout, oldItem, newItem, placeholder, event, element) => {setConfigValues(oldItem.i)}}
                        onResize={(layout, oldItem, newItem, placeholder, event, element) => onResize(oldItem)}
                        style={canvasBoxStyle}
                        ref={gridRef}
                        {...gridLayoutProps}
            >
                {layout.map((layoutElement) =>
                    <div
                        style={{zIndex:getAttributesById(layoutElement.i).attributes.zIndex}}
                        key={parseInt(layoutElement.i)}
                        data-grid={layoutElement}
                        ref={(ref) => elementRefs.current.push(ref)}
                        onClick={() => {setConfigValues(layoutElement.i)}}
                    >
                        {createElement(layoutElement)}
                    </div>

                )}
            </GridLayout>

It seems like the "ref"-attribute gets ignored from react, because none of the grid items refs are being pushed into the refs-array

const elementRefs = useRef([]);

The ref-attribute works just fine for the "GirdLayout"-Element.

I dont know what im doing wrong i tried many stuff. I need the refs of each grid item to get the width and height of each of them.