Redux-Form 7 Validation - Functional Component - reactjs

Question

so I'm trying to separate redux-form to stateless-component and container-component, but when I'm trying to do syncValidation, for some reason there is no validation called. what am I missing?
the error and warning in the renderField returns undefined.
and I'm planning to move the renderField function from the stateless component
container -
let EditMovie = (props) => {
const { updateMovie, editModal, editModalStateChange, invalid, initialValues, handleSubmit, pristine } = props;
return (
<MovieModal
modalTitle={initialValues.Title}
initialValues= {initialValues}
invalid= {invalid}
validators= {Validators}
exit= {editModalStateChange}
isOpen= {editModal}
handleSubmit= {handleSubmit}
onSubmit= {updateMovie}
pristine={pristine}
/>
);
};
const validate = values => {
const errors = {}
if (!values.Title) {
errors.username = 'Required'
}
return errors
}
const warn = values => {
const warnings = {
Title: 'bla bla'
}
return warnings
}
const mapStateToProps = (state) => ({
initialValues: state.movies.selectedMovie,
editModal: state.movies.editModal,
});
EditMovie = reduxForm({ form: 'editMovie', validate, warn })(EditMovie);
export default connect(mapStateToProps, { editModalStateChange, updateMovie } )(EditMovie);
stateless -
const renderField = ({ input, label, type, meta: { touched, error, warning } }) => (
<div>
<label>{label}</label>
<div>
<input {...input} placeholder={label} type={type} />
{touched &&
((error && <span>{error}</span>) ||
(warning && <span>{warning}</span>))}
</div>
</div>
)
const MovieModal = (props) => {
const { pristine, handleSubmit, onSubmit, isOpen, exit, validators, invalid, modalTitle } = props;
return (
<Modal visible={isOpen} onClickBackdrop={() => exit()}>
<div className="modal-body">
<form onSubmit={handleSubmit(onSubmit)}>
<div className="form-group">
<Field component={renderField} name="Title" label="Movie Title" />
</div>
<div className="modal-footer">
<button type="button" className="btn btn-secondary" onClick={() => exit()}>close</button>
<button type="submit" className="btn btn-primary" disabled={invalid || pristine}>Save</button>
</div>
</form>
</div>
</Modal>
);
}

Answer 1

you need to provide validate function in Field Component

Answer 2

Well I Found the problem !
the issue was with the Bootstrap Modal module named - react-bootstrap4-modal
when i wrapped MovieModal in the Modal Class and not inside of it, everything worked fine
thanks for the help