Field Form doesn't update selected value in option

Question

I've React Final Form in my project. I have a problem with updating the displayed option in select. The entire form works fine, but doesn't change the display value.

function App() {
  const [selectValue, setSelectValue] = useState();

return (
    <Form
      onSubmit={onSubmit}
      initialValues={{}}
      render={({ handleSubmit, form, submitting, pristine, values }) => (
        <form onSubmit={handleSubmit}>
            <label>Dish type</label>
            <Field
              name="type"
              component="select"
              defaultValue={selectValue}
              onChange={(e) => setSelectValue(e.target.value)}
              required
            >
              <option value="" />
              <option value="pizza">pizza</option>
              <option value="soup">soup</option>
              <option value="sandwich">sandwich</option>
            </Field>
          </div>
        </form>
      )}
    />
  );

On live-server option does not change its value. Displayed value is the same as the first time I selected.

Answer 1

Try to use the regular html select.

<select value={selectValue}
              onChange={(e) => setSelectValue(e.target.value)}
              required
            >
              <option value="" />
              <option value="pizza">pizza</option>
              <option value="soup">soup</option>
              <option value="sandwich">sandwich</option></select>