How to set default value in input and change it?

Question

JavaScript

const [nameValue, setNameValue] = useState("");

              <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 - the value that comes from the server
nameValue - the new value that I need to set

By default, the input should have a value from the server, and when I change it, as you can see in the code, when the focus is removed onBlur, the data is sent to the server

But when I delete the values ​​from input and 1 character remains, then the value that was returned by default is returned, respectively, I cannot clear the input

Answer 1

const [nameValue, setNameValue] = useState(name || "");

<TextField
  ...
  value={nameValue}
  ...
/>