Formik-向<select>添加'form-control'使其不起作用

Question

我在我的应用程序中使用了Formik，并且试图包含一个作为选择组件的字段。下面是我正在使用的代码，但这是非常标准的样板代码。它没有添加任何类即可按预期工作，但是当我将Bootstrap类“ form-control”添加到Field时，它不起作用。 By不起作用，我的意思是它不再显示所选值。我不确定为什么在其中添加CSS会导致它停止工作。

<SelectField
   className={className}
   id={"address.state"}
   name={"address.state"}
   placeholder="State"
   options={states}
/>

*************

class SelectField extends PureComponent {

  render() {
    const { className, name, id, options, ...fieldProps } = this.props;

    return (
      <>
        <Field
          {...fieldProps}
          className={`form-control ${className}`}
          component="select"
          id={id}
          name={name}
        >
          {options.map(option => (
            <option value={option.value} key={option.value}>
              {option.label}
            </option>
          ))}
        </Field>
      </>
    );
  }
}

SelectField.defaultProps = {
  className: '',
  name: '',
  id: '',
  options: []
};

export default SelectField;