I'm using react-awesome-query-builder with the @react-awesome-query-builder/antd package, and I'm trying to create a custom widget for a field called Consents.device. However, no matter what I do, the query builder always renders the default text input instead of my custom component.

Here’s what I’ve done so far:

1. Registered my custom widget in the widgets section:

import DeviceWidget from "@/components/crm/device-widget";

widgets: {
  ...AntdConfig.widgets,
  device_widget: {
    type: 'text',
    jsType: 'string',
    valueSrc: 'value',
    widget: DeviceWidget,
    valueLabel: 'Choose a device',
    valuePlaceholder: 'Choose a device',
    formatValue: val => `"${val}"`,
    mongoFormatValue: val => val,
  }
}

2. Registered the widget under types.text.widgets:

types: {
  ...AntdConfig.types,
  text: {
    ...AntdConfig.types.text,
    widgets: {
      ...AntdConfig.types.text.widgets,
      device_widget: {
        widgetProps: {},
        opProps: {},
      },
    },
  },
}

3. Defined the field like this:

Consents: {
  type: "!struct",
  label: "Consents",
  subfields: {
    device: {
      label: "Device",
      type: "text",
      preferWidgets: ["device_widget"],
      valueSources: ["value"],
      operators: ["equal", "not_equal", "is_empty", "is_not_empty"],
    }
  }
}

4. My custom widget is a controlled component:

const DeviceWidget = ({ value, setValue, placeholder }) => {
  return (
    <div>
      Device Widget 
    </div>
  );
};

Despite all this, the query builder never renders my custom widget, only the default text input.

I also tried using factory instead of widget, but it didn’t help. I followed the documentation here and here, but nothing seems to work.

Any ideas? Has something changed recently in how custom widgets are supported?