<select> not rendering option with reduxForm

import React from "react";
import { reduxForm, Field } from "redux-form";
import BoardFields from "./BoardFields";
import Category from "./Category";

class BoardForm extends React.Component {
  render() {
    return (
      <div>
        <form onSubmit={this.props.handleSubmit(values => console.log(values))}>
          <Field
            label="Name"
            type="text"
            name="boardName"
            component={BoardFields}
          />
          <Field
            label="Description"
            type="text"
            name="description"
            component={BoardFields}
          />

          <Field
            label="Category"
            type="text"
            name="categories"
            component={Category}
          />
          <Field
            label="privacy"
            name="privacySettings"
            component="input"
            type="checkbox"
          />
          <button className="red btn-flat right white-text" type="button">
            Cancel
          </button>
          <button className="teal btn-flat right white-text" type="submit">
            Create
          </button>
        </form>
      </div>
    );
  }
}
export default reduxForm({
  form: "newBoardForm"
})(BoardForm);

`
This is my code in Category.js

import React from "react";
const categories = [
  "Animal and pets",
  "Art",
  "Architecture",
  "Cars",
  "Fashion",
  "Lifestyle"
];

const Category = ({ input, label, children }) => {
  return (
    <div>
      <div className="field">
        <label className="label">{label}</label>
      </div>
      <div>
        <select {...input}>
          <option value="">What kind of board is it?</option>
          {categories.map(val => (
            <option value={val} key={val}>
              {val}
            </option>
          ))}
        </select>
      </div>
    </div>
  );
};

export default Category;

`

Please help where I am going wrong here