ReferenceArrayInput component dose not show data as expected

Question

Hope I can get some help here. I have some issues after updating react-admin from version 3 to version 4. The components ReferenceArrayInput and AutocompleteArrayInput do not work as they used to.

In the pervious version, The component got some data (50 rows in descending order). While typing, the backend searched for the text and gave the frontend the response.

in version 4, it's broken (I probably do something wrong). basically, as you type, if the data in array dose not appear in the chips, the chips are dissipating and the components are braking.

please see the old code in version 3:

<ReferenceArrayInput
        source="categories"
        reference="categories"
        label="Categories"
        perPage={50}
        sort={{ field: "id", order: "DESC" }}
        filterToQuery={(searchText: string) => {
          const filtersArray: Array<UrlQueryEntry<{ [x: string]: string | number }>> = [];

          if (searchText) {
            filtersArray.push({
              type: "or",
              fieldName: "bt_category_name",
              operator: "cont",
              operatorParams: [searchText],
            });
          }

          return {
            nestjsxCrud: filtersArray,
          };
        }}
        format={(list: any) => {
          if (!list) {
            return [];
          }

          return list.map((item: any) => item.id);
        }}
        parse={(list: any) => {
          if (!list) {
            return [];
          }

          return list.map((value: any) => ({ id: value }));
        }}
      >
        <AutocompleteArrayInput optionText={(record: any) => `${record.id}-${record.bt_category_name}`} />
      </ReferenceArrayInput>

The new code in version 4:

<ReferenceArrayInput
      reference="categories"
      source="categories"
      sort={{ field: "id", order: "DESC" }}
      resettable={false}
    >
      <AutocompleteArrayInput
        source="categories"
        label="Categories"
        fullWidth
        filterToQuery={(searchText: string) => {
          const filtersArray: Array<UrlQueryEntry<{ [x: string]: string | number }>> = [];

          if (searchText) {
            filtersArray.push({
              type: "or",
              fieldName: "bt_category_name",
              operator: "cont",
              operatorParams: [searchText],
            });
          }

          return {
            nestjsxCrud: filtersArray,
          };
        }}
        parse={(value: any) => (value ? value.map((item: any) => ({ id: item })) : [])}
        format={(value: any) => (value ? value.map((item: any) => item.id) : [])}
        optionText={(record: any) => `${record.id}-${record.bt_category_name}`}
      />
    </ReferenceArrayInput>

Can anyone please tell me what I am doing wrong?