React-dadata-suggestions-address

import React, { useState, useEffect } from 'react';
import { AddressSuggestions } from 'react-dadata';
import 'react-dadata/dist/react-dadata.css';

// Кастомный компонент для отображения подсказок
const CustomSuggestionItem = ({ suggestion, onClick }) => {
  const postalCode = suggestion.data.postal_code;
  const unrestrictedValue = suggestion.unrestricted_value;

  // Форматирование подсказки
  const formattedAddress = `${postalCode ? postalCode + ', ' : ''}${unrestrictedValue.replace(`${postalCode}, `, '')}`;

  return (
    <div onClick={() => onClick(suggestion)} className="custom_suggestion_item">
      {formattedAddress}
    </div>
  );
};

const AddressLoadInput = ({ onChange, value }) => {
  const [inputValue, setInputValue] = useState(value || '');

  useEffect(() => {
    setInputValue(value || '');
  }, [value]);

  const handleDadataChange = (suggestion) => {
    const postalCode = suggestion?.data?.postal_code || '';
    const unrestrictedValue = suggestion?.unrestricted_value || '';
    // Форматирование с почтовым индексом
    const formattedAddress = `${postalCode ? postalCode + ', ' : ''}${unrestrictedValue.replace(`${postalCode}, `, '')}`;

    // Обновляем состояние поля ввода с форматированным адресом
    setInputValue(formattedAddress);

    // Передаем значение и почтовый индекс в обработчик onChange
    onChange({
      target: {
        name: 'address_load_input',
        value: formattedAddress,
        postal_code: postalCode // Передаем почтовый индекс
      }
    });
  };

  return (
    <label htmlFor="address_load_input" className="custom_label_address_load_input address_load_input">
      <AddressSuggestions
        token="9ea3ffa98ca49c6aaec53c18c68da82ec6fc0da9"
        type="address"
        id="address_load_input"
        name="address_load_input"
        placeholder="Начните вводить адрес"
        inputProps={{
          className: 'custom_input_address_load_input',
          placeholder: 'Начните вводить адрес, и воспользуйтесь подсказкой',
          value: inputValue, // Устанавливаем значение поля ввода
          onChange: (e) => {
            setInputValue(e.target.value);
            onChange({
              target: {
                name: 'address_load_input',
                value: e.target.value,
                postal_code: '' // Очистить почтовый индекс при ручном вводе
              }
            });
          } // Обновляем состояние при ручном вводе
        }}
        suggestionsListProps={{
          className: 'custom_suggestions_address_load_input address_load_input',
          renderSuggestion: (suggestion, { onClick }) => (
            <CustomSuggestionItem suggestion={suggestion} onClick={onClick} />
          )
        }}
        onChange={handleDadataChange} // Передаем функцию без обертки
        renderOption={(suggestion) => (
          <div>
            {suggestion.data.postal_code ? `${suggestion.data.postal_code}, ` : ''}
            {suggestion.unrestricted_value.replace(`${suggestion.data.postal_code}, `, '')}
          </div>
        )}
      />
    </label>
  );
};

export default AddressLoadInput;

При использовании DaData-AddressSuggestions не могу справиться с установлением состояния. Я пытаюсь выводить полный адрес с почтовым индексом в единственное поле ввода адреса. То есть нужно, чтобы пользователь после выбора полной подсказки в поле ввода также видел полный адрес. Но всё равно адрес сокращённый, не смотря на то, что данные содержат полный адрес после форматирования.