const [query, setQuery] = useState(initialQuery);

const handleOnValidate = useCallback(() => ... );

<QueryBuilderDndWithoutProvider canDrop={handleCanDrop}>
  <QueryBuilder
    key="query-builder"
    fields={fields} //memoized
    getOperators={getOperators} //function outside of the component
    combinators={combinators} //constant outside of the component
    query={query}
    onQueryChange={setQuery}
    controlElements={{
      valueEditor: CustomValueEditor, //outside of the component
      ruleGroupHeaderElements: CustomRuleGroupHeader, //outside of the component
    }}
    controlClassnames={{
      fields: 'mx-2',
      ...(showBranches && { queryBuilder: 'queryBuilder-branches' }),
    }}
    context={{
      showLabels,
      showBranches,
    }}
    validator={handleOnValidate}
    disabled={!isEditMode}
    showCloneButtons
    showShiftActions
    enableDragAndDrop
    resetOnFieldChange
    resetOnOperatorChange
    enableMountQueryChange={false}
  />
</QueryBuilderDndWithoutProvider>