How To Use Dynamic Height/Width using Reat-Grid-Layout ? React/js

Question

I'm trying to implement a Drag & Drop for a website I'm working on. Its use is to build custom forms. We have the fields and everything, I only need to focus on drag & dropping the fields. I found this library. However, I tried implementing it using the Responsive Grid Layout, and got it to work with a given height. So my list of fields looks like this:

fields: [
    {
      size: 6,
      field: {
        layout: {
          resizeHandles: ['e'],
          x: 0,
          y: 0,
          w: 3,
          h: 0,
          minH: 3,
          minW: 2,
          i: 'firstname-id',
          isDraggable: true,
          isResizable: true,
        },
        id: 'firstname-id',
        text: 'First Name',
        defaultValue: '',
        type: FieldType.Text,
        required: true,
        hiddenText: false,
        textColor: undefined,
        enabled: true,
        visible: true,
        minLength: 4,
        maxLength: 10,
        excludeFromReport: false,
        placeholder: '',
      },
    },
    {
      size: 6,
      field: {
        layout: {
          resizeHandles: ['e'],
          x: 3,
          y: 0,
          w: 3,
          h: 0,
          minH: 3,
          minW: 2,
          i: 'lastname-id',
          isDraggable: true,
          isResizable: true,
        },
        id: 'lastname-id',
        text: 'Last Name',
        defaultValue: '',
        type: FieldType.Text,
        required: true,
        hiddenText: false,
        textColor: undefined,
        enabled: true,
        visible: true,
        minLength: 4,
        maxLength: 10,
        excludeFromReport: false,
        placeholder: '',
      },
    }]

Then, I map through the list like so:

 <ResponsiveGridLayout
    className="layout"
    rowHeight={1}
    compactType="vertical"
    // resizeHandle={<div className="react-resizable-handle">&lt;|&gt;</div>}
    onLayoutChange={(layout) => layoutChangeHandle(layout)}
    breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
    cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }}
  >
    {fields.map((field, idx) => {
      return (
        <div key={field.field.id} ref={refs[idx]} data-grid= {field.field.layout }>
          <FieldWrapper
            hiddenText={field.field.hiddenText}
            label={field.field.text}
            textColor={field.field.textColor}
            size={field.field.size}
            required={field.field.required}
            visible={field.field.visible}
            onDimensionChange={(height) => onDimensionChange(height, field.field.id)}
          >
            {getFieldComponent(field.field)}
          </FieldWrapper>
        </div>
      );
    })}
  </ResponsiveGridLayout>

FieldWrapper is a component we made. I wrapped it around a div to get the data-grid property from React-Grid-Layout. "onDimensionChange" is a function that uses a custom hook to get the content's width and height so I am currently able to extract the content's height. My problem is taking that height and putting it in the RGL.

I would like to be able to get the height of FieldWrapper's content and use something to distribute the new height to the layout 'h' property.

Thing is that when I try doing it, the React-Grid-Layout does not re-render.. Any idea ?