Как засетить пропсы в стейт и нужно ли это делать?

Question

[lexstile]

Есть контролируемый инпут для ввода телефона.
Но дефолтное значение приходит сверху, если оно существует.

Проблема - в таком варианте значение подставляется только после обновления компонента.

Если я в defaultValue у инпута подставлю phone, все отработает, как нужно.
Но если я его кладу в useState, чтобы одна переменная отвечала за значение, при монтировании значение не подставляется.

export const ModalPhoneConfirmation = ({ id, phone, onCloseModal }) => {

  const [phoneValue, setPhoneValue] = useState(phone);

// ..........................................

Инпут:

<Input
                type="phone"
                defaultValue={phoneValue}
                placeholder="Введите телефон"
                onChange={onChangePhoneValue}
              />

UPD: Нашел две проблемы в данном коде
1. Дефолтное значение state присваивается только один раз
2. У defautValue +/- то же самое, обновляет DOM только раз

Пока сделал через useEffect, если кто-то предложит решение лучше, буду благодарен

useEffect(() => setPhoneValue(phone), [phone]);
// ну и defaultValue заменил на value

Comments

[Алексей]

А точно в phone при монтировании компонента есть телефон? очень похоже, что при рендере ModalPhoneConfirmation в phone изначально прилетает undefined или пустая строка

[lexstile]

Алексей, 100% есть, уже вдоль и поперек продебажил