Rendering a select field in Redux-Form 6 with validation

form-fields.js

import React, { Component } from 'react';
import { Field, reduxForm } from 'redux-form';

export const renderSelect = field => (
  <div>
    <select {...field.input}/>
    {field.touched && field.error && <div className="error">{field.error}</div>}
  </div>
);

form_validation.js

export function validate(formProps) {
  const errors = {};

  if (!formProps.firstName) {
    errors.firstName = 'Please enter a first name';
  }

  if (!formProps.lastName) {
    errors.lastName = 'Please enter a last name';
  }

  if (!formProps.email) {
    errors.email = 'Please enter an email';
  }

  if (!formProps.phoneNumber) {
    errors.phoneNumber = 'Please enter a phone number'
  }

  if(!formProps.sex) {
    errors.sex = 'You must enter your sex!'
  }

  return errors;
}

renderSelect.js

import { validate } from '../filepath/form_validation.js';
import { renderSelect } from './form-fields.js';

//render form field, missing all other components
//this is just the select object
<label>Gender:</label>
<Field name="sex" component={renderSelect}>
  <option></option>
  <option name="male">Male</option>
  <option name="female">Female</option>
</Field>

Hi everyone,

I am using react 17.0.2
redux 4.1.2
react-redux 7.2.6
and redux-form 8.3.8

Unable to render the dropdown using Field from redux-Form.

Can someone guide me in right direction? Any help would be appreciated.