redux form validation is not being received - reactjs

Question

I'm trying to disable the submit button for my form. I've removed most of the handlers and inputs accept for the 'name' input, so it's clearer to see. The name input works fine, however when I add a validation prop to the name input, and disabled prop to the submit button, the button still stays active. What am I missing?
export class RecipeForm extends React.Component {
onChange = e => {
const { value, name } = e.target;
this.setState({
[name]: value
});
};
// **** other function handlers here *****//
required = value => {
if (!value || value === '') {
return 'This field is required';
}
return undefined;
}
render() {
const { name } = this.state;
const { submitSucceeded, handleSubmit, valid } = this.props;
if (submitSucceeded) { // submitSucceeded is a prop of redux form, boolean: true, and succeed to submit
alert("You have successfully added a new recipe")
return <Redirect to='/your-menu' />
}
let newCategory;
if (otherCheckbox) {
newCategory = <NewCategory addNewCategory={this.addNewCategory} />;
}
return (
<div className="form">
<Alerts />
<form onSubmit={handleSubmit(recipe => this.onSubmit(recipe))}>
<h2>Add a new favorite recipe!</h2>
<label htmlFor="name"> Recipe Name </label>
<input
name="name"
id="name"
type="text"
label="Recipe Name"
value={name}
validate={[this.required]}
onChange={this.onChange}
/>
// **** other inputs here ***** ///
<button type="submit"
disabled={!this.props.valid}
>Submit</button>
</form>
<br></br>
</div>
);
}
}
const mapStateToProps = state => ({
menuItems: state.menu.menuItems,
categoryList: state.users.categoryList,
userId: state.auth.id,
authToken: state.auth.authToken
});
RecipeForm = connect(mapStateToProps)(RecipeForm);
export default reduxForm({
form: "recipe",
onSubmitFail: (errors, dispatch) =>
dispatch(focus("recipe", Object.keys(errors)[0]))
})(RecipeForm);