I’m trying to use a QueryBuilder component as a ValueEditor in another QueryBuilder. However, I’m encountering an issue where the nested QueryBuilder causes multiple rerenders, and I get the following errors:

Uncaught Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops

Uncaught Error: Objects are not valid as a React child (found: [object Object]). If you meant to render a collection of children, use an array instead.

Here’s my implementation for the nested QueryBuilder as a custom ValueEditor:

function QueryBuilderValueEditor(props: ValueEditorProps) {
  return (
    <QueryBuilder
      fields={[{ name: 'firstName', label: 'First Name' }]}
      query={props.value}
      onQueryChange={(q) => props.handleOnChange(q)}
      showCloneButtons
      showShiftActions
      combinators={combinators}
    />
  );
}

And here’s the parent QueryBuilder setup:

const sampleWidgetQuery = {
  combinator: 'and',
  rules: [
    { field: 'firstName', operator: '=', value: 'Steve' },
  ]
};

export function ParentQueryBuilder() {
  const [query, setQuery] = useState<ExtendedRuleGroupType>({
    combinator: 'and',
    rules: [
      { field: 'sample', operator: '=', value: sampleWidgetQuery },
    ],
  });

  return (
    <QueryBuilderDnD dnd={{ ...ReactDnD, ...ReactDndHtml5Backend }}>
      <QueryBuilder 
        fields={fields}
        query={query}
        onQueryChange={(q) => setQuery(q)}
        showCloneButtons
        showShiftActions
        combinators={combinators}
        enableDragAndDrop
        controlElements={{ valueEditor: CustomValueEditor }}
      />
    </QueryBuilderDnD>
  );
}

The error occurs when I add props.handleOnChange for onQueryChange.

Questions:

• Is it possible to nest a QueryBuilder as a custom ValueEditor?
• If it’s supported, is there an issue with my implementation, or do I need to handle onQueryChange differently for the nested component?
• If nesting is not supported, are there any recommended workarounds for achieving similar functionality?

Any insights or suggestions would be greatly appreciated. Thanks in advance!