Категории автозаполнения пользовательского интерфейса материала в ReactJS

Я использую автозаполнение MUI и Formik и хотел сгруппировать их по категориям. Если у него нет sub_accounts, то у него не должно быть метки заголовка. Примерно так: https://mui.com/material-ui/react-autocomplete/#grouped

КОДЫ------> НАЖМИТЕ ЗДЕСЬ

Ожидаемый результат в пользовательском интерфейсе выглядит примерно так:

• Мелкая наличность

• Наличные в банке - Bank of America

  • Bank of America – единственный владелец
  • Банк Америки - юридическое лицо

• Наличные

• CIB - Банк Вьетнама

  • Банк Вьетнама Персональный
  • Проверка счета Банка Вьетнама

Petty Cash, Cash In Bank - Bank of America, Cash и CIB - Bank of Vietnam должны быть выровнены.

Cash In Bank - Bank of America и CIB - Bank of Vietnam нельзя щелкнуть/выбрать — можно выбрать только его sub_accounts, а также Petty Cash и Cash.

КОД

export const CashAccountAutocomplete = ({
  field,
  form: { touched, errors, setFieldValue, values },
  disabled,
  ...props
}) => {
  const [inputValue, setInputValue] = useState("");

  const handleChangeEvent = (_, newValue, reason) => {
    if (reason === "clear") {
      setFieldValue(field.name, { id: "", name: "" });
      return;
    }
    setFieldValue(field.name, newValue);
  };

  const handleInputChange = (_, newInputValue) => {
    setInputValue(newInputValue);
  };

  const extractSubAccounts = (accounts) => {
    if (!Array.isArray(accounts)) {
      console.error("Invalid accounts data. Expected an array.");
      return [];
    }

    return accounts.flatMap(
      ({ id, name, sub_accounts }) =>
        sub_accounts && sub_accounts.length > 0
          ? extractSubAccounts(sub_accounts) // Recursively extract sub-accounts
          : [{ id, name }] // Include the account if it has no sub-accounts
    );
  };

  const filteredData = extractSubAccounts(accounts);

  return (
    <Autocomplete
      {...field}
      disabled = {disabled}
      getOptionLabel = {(option) =>
        typeof option === "string" ? option : option?.name || ""
      }
      renderOption = {(props, option) => {
        return (
          <li {...props} key = {option.id}>
            {option?.name}
          </li>
        );
      }}
      filterOptions = {(x) => x}
      options = {filteredData || []}
      autoComplete
      includeInputInList
      filterSelectedOptions
      noOptionsText = {"No data"}
      onChange = {handleChangeEvent}
      inputValue = {inputValue}
      onInputChange = {handleInputChange}
      renderInput = {(params) => (
        <TextField
          {...params}
          {...props}
          error = {touched[field.name] && errors[field.name] ? true : false}
          helperText = {
            touched[field.name] &&
            errors[field.name] &&
            String(errors[field.name].id)
          }
        />
      )}
      fullWidth
    />
  );
};