Как установить value в input из сервера и изменять его?

У меня такая проблема, есть такой инпут

              <TextField
                id="outlined-read-only-input"
                label="Display Name"
                variant="outlined"
                value={nameValue !== "" ? nameValue : name || ""}
                onChange={(e) => setNameValue(e.target.value)}
                onBlur={() => setName({ variables: { name: nameValue } })} 
              />

name - это значение которое приходит из сервера, оно должно сразу отображаться в инпуте

nameValue - это новое значение которое я ввожу в инпут

Когда я начинаю удалять значение из инпута и остается в нем 1 символ, значение возвращается к предыдущему . как пофиксить это?

Я понимаю что проблема здесь value={nameValue !== "" ? nameValue : name || ""} . но как можно избежать ее?