ui:hideError and Mui-error styles on parent component

Prerequisites

• I have read the documentation

What theme are you using?

mui

What is your question?

I am new to using this library. And I need your help. When using "ui:hideError" for a parent component, when an error occurs in a child component, the parent component is highlighted with Mui-error styles. How can I affect this?

I've looked at issue 351, 1935 and with all related issues.

I determined that this problem arises because even though we hide the errors messages of the parent error schema, they still remain and the component gets a state of error=true. I'm using the default select component and don't understand how I can change this state in the first red block in the picture. The lower block with the error is displayed correctly.

My uiSchema

const uiSchema: UiSchema = {
  'ui:option.emptyValue': true,
  'ui:options': {
    label: false,
  },
  realEstateMarket: {
    'ui:options': {
      label: false,
      hideError: true,
    },
    comissioning: {
      'ui:field': 'CommissioningField',
    },
  },

My schema

export const createObjectSchemaStep1: RJSFSchema = {
  title: 'Object Schema Step 1',
  type: 'object',
  properties: {
    realEstateMarket: {
      $ref: '#/definitions/realEstateMarket',
    },
  definitions: {
    realEstateMarket: {
      type: 'object',
      properties: {
        marketType: {
          title: 'Ринок нерухомості',
          type: 'string',
          enum: ['Первинний', 'Вторинний'],
        },
      },
      dependencies: {
        marketType: {
          oneOf: [
            {
              properties: {
                marketType: {
                  enum: ['Вторинний'],
                },
              },
            },
            {
              properties: {
                marketType: {
                  enum: ['Первинний'],
                },
                housingComplexClass: {
                  $ref: '#/definitions/housingComplexClass',
                },
                comissioning: {
                  $ref: '#/definitions/comissioning',
                },
              },
            },
          ],
        },
      },
    },
    comissioning: {
      title: 'Здача в експлуатацію',
      type: 'string',
      format: 'year',
    },
    housingComplexClass: {
      type: 'string',
      title: 'Класс ЖК',
      enum: ['Преміум', 'Економ', 'Комфорт', 'Бізнес'],
    },
  },
  formData: {
    realEstateMarket: {
      marketType: 'Первинний',
      comissioning: '2025',
      housingComplexClass: 'Преміум',
    },
  },
};

My Form

import FormTemplate from '@rjsf/mui';
import RJSF, { FormProps } from '@rjsf/core';
import FormTemplate from '@rjsf/mui';
import widgets from '@Utils/widgetRegistration';
import { fields } from '@Utils/fieldRegistration';
import uiSchema from '@Utils/uiSchema';

const Form = forwardRef(
  (
    {
      schema,
      onSubmit,
      onChange,
      formData,
      children,
      showErrorList,
      customValidate,
      validator,
      formContext,
      ...rest
    }: FormProps,
    ref: Ref<RJSF>,
  ) => {
return (
      <FormTemplate
        ref={ref}
        schema={schema}
        uiSchema={uiSchema}
        validator={validator}
        onSubmit={onSubmit}
        onChange={onChange}
        widgets={widgets}
        fields={fields}
        templates={{
          ArrayFieldTemplate,
          ObjectFieldTemplate,
          FieldTemplate: CustomFieldTemplate,
        }}
        formData={formData}
        showErrorList={showErrorList}
        customValidate={customValidate}
        formContext={formContext}
        {...rest}
      >
        <div>{children}</div>
      </FormTemplate>
 );
  },
);