Why List element only gets selected when clicked twice?

Question

I am building a React application and using react-final-form library. I am rendering a select component, but on selecting an item it doesn't get selected. On selecting again, then only it gets selected. I'm not sure why select component state is not getting changed ? Could anyone please check and assist.

Here is the code sandbox link : https://codesandbox.io/s/broken-sunset-9ogwc8?file=/src/Components/Actors.jsx

Regards.

Answer 1

In your NativeSelectField.jsx, change the onChange handler as below:

      <NativeSelect
          ...
          ...
          onChange={(event) => {
            input.onChange(event.target.value);
          }}
          ...
          ...
      />

Working Demo