I'm using react-redux and redux-form for my new project. When I create a custom select Field, it never passes the first option value (that is already "selected") to the handleSubmit function. Only when I manually select avalue, it passes the option value correctly.

Custom select:

const Select = ({ input, options, disabled }) => (
  <div>
    <select {...input} disabled={disabled}>
      { options.map(option =>
        <option key={option.value} value={option.value}>
          {option.label}
        </option>
      )}
    </select>
  </div>
);

Form Component:

function RegisterForm({ handleSubmit, titles }) {
  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="title">Title</label>
      <Field name="title" options={titles} component={Select} />

      <button type="submit">Submit</button>
    </form>
  );
}

RegisterForm.propTypes = {
  handleSubmit: PropTypes.func.isRequired,
  titles: PropTypes.array.isRequired,
};

export default reduxForm({
  form: 'register'
})(RegisterForm);

Do I have to initialize the select from the redux state? Or is there another way to force the first value to be the initial value?

Thanks in advance!