Redux-form Material-UI dropdown not showing dropdown, selection - reactjs

Question

Im using Material-ui select #material-ui/core/Select with redux-form as a HOC. I have created the form and select box appears but the options are not showing.
here is my component
import React from "react";
import { Field, reduxForm } from "redux-form";
import SelectField from "#material-ui/core/Select";
import MenuItem from "#material-ui/core/MenuItem";
const renderSelectField = ({
input,
label,
meta: { touched, error },
children,
...custom
}) => (
<SelectField
floatingLabelText={label}
errorText={touched && error}
{...input}
onChange={(event, index, value) => input.onChange(value)}
children={children}
{...custom}
/>
);
const Form = props => {
const { handleSubmit, pristine, reset, submitting } = props;
return (
<form onSubmit={handleSubmit}>
<div>
<Field
name="favoriteColor"
component={renderSelectField}
label="Favorite Color"
>
<MenuItem value="1" primaryText="value 1" />
<MenuItem value="2" primaryText="value 2" />
<MenuItem value="3" primaryText="value 3" />
</Field>
</div>
<div>
<button type="submit" disabled={pristine || submitting}>
Submit
</button>
<button type="button" disabled={pristine || submitting} onClick={reset}>
Clear Values
</button>
</div>
</form>
);
};
export default reduxForm({
form: "form"
})(Form);
It appears as below
when clicked the combobox options as here
And I have created a codesandbox instance
https://codesandbox.io/s/l2pqoryvvl?fontsize=14

Answer 1

Simply change the MenuItems to
<MenuItem value="1">value 1</MenuItem>
<MenuItem value="2">value 2</MenuItem>
<MenuItem value="3">value 3</MenuItem>
menu item does not take a primary text as a prop.

Answer 2

#S.Haviv has mentioned when i change
<MenuItem value="1" text="value 1" />
to
<MenuItem value='1'>value 1</MenuItem> the menu items appeared but the click isn't success. so I had to get rid of the onclick handler in the Select field
and also I added a label for the component
Here is the code for complete component
https://codesandbox.io/s/l2pqoryvvl?fontsize=14
import React from "react";
import { Field, reduxForm } from "redux-form";
import SelectField from "#material-ui/core/Select";
import MenuItem from "#material-ui/core/MenuItem";
import InputLabel from '#material-ui/core/InputLabel';
import FormControl from '#material-ui/core/FormControl';
const renderSelectField = ({
input,
label,
meta: { touched, error },
children,
...custom
}) => (
<FormControl>
<InputLabel >{label}</InputLabel>
<SelectField
floatingLabelText={label}
errorText={touched && error}
{...input}
children={children}
{...custom}
/>
</FormControl>
);
const Form = props => {
const { handleSubmit, pristine, reset, submitting } = props;
return (
<form onSubmit={handleSubmit}>
<div>
<Field
name="value"
component={renderSelectField}
label="Choose a Value"
value="1"
>
<MenuItem value="1">value 1 </MenuItem>
<MenuItem value="2">value 2 </MenuItem>
<MenuItem value="3">value 3 </MenuItem>
</Field>
</div>
<div>
<button type="submit" disabled={pristine || submitting}>
Submit
</button>
<button type="button" disabled={pristine || submitting} onClick={reset}>
Clear Values
</button>
</div>
</form>
);
};
export default reduxForm({
form: "form" // a unique identifier for this form
})(Form);