How do I dynamically populate the react-awesome-query-builder list?

I'm using the following code to dynamically populate the react-awesome-query-builder with list values from my database. When I run this code and activate the dropdown, it says there is no data.

I've looked at the JSON format and it looks identical to the premade config file in the examples on the Github (https://github.com/ukrbublik/react-awesome-query-builder). Is there any way to dynamically fill the list? If so, is there anything obvious that is going wrong?

const loadMetricConfigFields = async () => {
    let fields = {};

    const result = await FetchData(url);

    // Set up the category fields that will hold the metrics
    result.forEach(element => {
      fields[`${element.categoryName}`] = {
        label: element.categoryName,
        subfields: {},
        tooltip: 'tooltip',
        type: '!struct'
      };
    });

    for (let count = 0; count < result.length; count++) {
      // Set up the subfields first
      fields[`${result[count].categoryName}`]['subfields'][count] = {
        label: result[count].name,
        type: result[count].uiComponentName.toLowerCase(),
        valueSources: ['value', 'field'],
        operators: [],
        fieldSettings: {},
        widgets: {
          field: {},
          number: {
            widgetProps: {}
          },
          rangeSlider: {},
          slider: {}
        },
        mainWidget: 'number',
        defaultOperator: ''
      };

      const operators = await FetchData(url + endpoint + result[count].dataTypeId);

      // Set up the operators for each subfield
      operators.forEach(op => {
        fields[`${result[count].categoryName}`]['subfields'][count]['operators'].push(op.name);
      })

      // Set up the defaultOperator for each subfield
      fields[`${result[count].categoryName}`]['subfields'][count]['defaultOperator'] = operators[0].name;
    }

    await setConfigFields(fields);
  }