Declaring redux form in both the child and parent component causes error - reactjs

Question

Uncaught Error: asyncValidate function passed to reduxForm must return a promise
Declaring multiple redux forms in both child and parent component causes the error above. I feel like it's a bug actually.
I have a parent component called WorkExperience, where I render multiple child components called DashboardListItem, which is the work experience a user has.
In the parent component I have a redux form to create a work experience. Also, I have other redux forms inside the child component where I can toggle edit forms for each list item.
The structure is same as this.
WorkExperience (has postWorkExperienceForm)
DashboardListItem (has edit form with populated initial values)
DashboardListItem
DashboardListItem
So, this structure is causing the error when I type into toggleable edit form. If I remove redux form declaration either from the parent or the child component, everything becomes normal.
Also all the forms are in the store too.
Thank you
Parent Component
renderWorkExperience(){
const workExperience = this.props.candidate.workExperience;
return Object.keys(workExperience).map((key, index) => {
let date = `${workExperience[key].startYear}-${workExperience[key].endYear}`
return <DashboardListItem key={index} {...this.props}
title={workExperience[key].companyName}
subTitle={workExperience[key].title}
meta={date}
summary={workExperience[key].summary}
initialValues={workExperience[key]}
form={workExperience[key]._id} />
});
}
renderForm(){
const activeClass = this.state.displayForm ? 'btn btn-success btn-block mt8' : 'btn btn-primary btn-block mt8'
const { handleSubmit } = this.props;
return(
<form onSubmit={ handleSubmit(this.onSubmit) } className="form-horizontal">
<div className={this.state.displayForm ? 'd-block mb8' : 'd-none'}>
<Field name="companyName"
type="text"
label="Company Name"
placeholder="Apple inc."
id="input-company-name"
component={renderHorizontalTextField} />
<Field name="title"
type="text"
label="Title"
placeholder="Marketing Specialist"
id="input-title"
component={renderHorizontalTextField} />
<Field name="startYear"
type="text"
label="Start Year"
placeholder=""
id="input-start-year"
component={renderHorizontalTextField} />
<Field name="endYear"
type="text"
label="End Year"
placeholder="Blank if current"
id="input-end-year"
component={renderHorizontalTextField} />
<Field name="summary"
rows="4"
label="Summary"
placeholder="Summary..."
id="input-summary"
component={renderTextAreaFieldWithLabelAndPopover} />
</div>
<button type={this.state.displayForm ? "button" : "submit"}
className={activeClass}
onClick={this.handleClick}>{ !this.state.displayForm ?
'Add Work Experience' : 'Save' }
</button>
</form>
)
}
export default reduxForm({
form: 'postWorkExperienceForm'
})(WorkExperience);
Child Component
renderForm(){
const activeClass = this.state.displayForm ? 'btn btn-success btn-block mt8' : 'btn btn-primary btn-block mt8';
const { handleSubmit } = this.props;
return(
<form onSubmit={ handleSubmit(this.onSubmit) } className="form-horizontal">
<div className={this.state.displayForm ? 'd-block mt8' : 'd-none'}>
<Field name="companyName"
type="text"
label="Company Name"
placeholder="Apple inc."
id="input-company-name"
component={renderHorizontalTextField} />
<Field name="title"
type="text"
label="Title"
placeholder="Marketing Specialist"
id="input-title"
component={renderHorizontalTextField} />
<Field name="startYear"
type="text"
label="Start Year"
placeholder=""
id="input-start-year"
component={renderHorizontalTextField} />
<Field name="endYear"
type="text"
label="End Year"
placeholder="Blank if current"
id="input-end-year"
component={renderHorizontalTextField} />
<Field name="summary"
rows="4"
label="Summary"
placeholder="Summary..."
id="input-summary"
component={renderTextAreaFieldWithLabelAndPopover} />
<button className="btn btn-success" type="submit">Save</button>
</div>
</form>
)
}
export default reduxForm({
enableReinitialize: true
})(
connect(null, { updateWorkExperience })(DashboardListItem)
);
Found out that a similar question is asked here. Although he hasn't fixed the problem, found a way around.
Redux Form - "form={ }" and "initialValues={ }" properties not recognized with multiple forms (redux-form v7.0.4)

Answer 1

I ended up putting work experience form into a separate component called WorkExperienceForm and imported it into WorkExperience and DashboardListItem components. This solved the issue.
Form names are passed to WorkExperienceForm from the parent components.
I was planning to put the forms into a separate component anyway, but wanted to solve the problem. So the bug is still there if it is one.
WorkExperienceForm
import React from 'react';
import { Field, reduxForm } from 'redux-form';
import { renderHorizontalTextField } from '../Fields/TextFields';
import { renderTextAreaFieldWithLabelAndPopover } from '../Fields/TextAreaFields';
const WorkExperienceForm = ({ handleSubmit, onSubmit }) => {
return(
<form onSubmit={ handleSubmit(onSubmit) } className="form-horizontal">
<Field name="companyName"
type="text"
label="Company Name"
placeholder="Apple inc."
id="input-company-name"
component={renderHorizontalTextField} />
<Field name="title"
type="text"
label="Title"
placeholder="Marketing Specialist"
id="input-title"
component={renderHorizontalTextField} />
<Field name="startYear"
type="text"
label="Start Year"
placeholder=""
id="input-start-year"
component={renderHorizontalTextField} />
<Field name="endYear"
type="text"
label="End Year"
placeholder="Blank if current"
id="input-end-year"
component={renderHorizontalTextField} />
<Field name="summary"
rows="4"
label="Summary"
placeholder="Summary..."
id="input-summary"
component={renderTextAreaFieldWithLabelAndPopover} />
</form>
)
}
export default reduxForm({
enableReinitialize: true
})(WorkExperienceForm);