How to set array into state onclick redux form - arrays

Question

I am using a wizard in my project. In step 2 I have one form with a data table. The purpose of a data table is when I click on the button a form value pushes into a data table. I have done this when I submit the form, a form value append or push into a data table but I am facing an issue is that I can't maintain or set the state of that a data table array.
My code is shown below
import React, {useState, Fragment} from 'react';
import PropTypes from 'prop-types';
import { Field, FieldArray, reduxForm } from 'redux-form'
import FormInput from './../FormInput'
import ConsigneeTables from './ConsigneeTables'
import {
Button,
Card,
CardBody,
Col,
FormGroup,
Input,
Label,
Row,
Table,
Progress
} from 'reactstrap'
const ConsigneeLocations = (props) => {
const {handleSubmit, previousPage} = props
const consigneeData = []
const initialFormState = {
id: null,
consignee_branch_number: '',
consignee_add1: '',
}
const [CurrentConsignee, setCurrentConsignee] = useState(initialFormState)
const [consignees, setConsignees] = useState(consigneeData)
const [consignee, setConsignee] = useState(initialFormState)
const handleInputChange = (event) => {
const {name, value} = event.target
setConsignee({
...consignee,
[name]: value
})
}
const addConsignee = () => {
consignee.id = consignees.length + 1
console.log(consignee);
consignees.push(consignee)
setConsignees([...consignees])
}
return (<form onSubmit={handleSubmit}>
<h2>View users</h2>
<ConsigneeTables consignees={consignees}/>
<Col xs="12" sm="12">
<Card className="card-border">
<CardBody>
<Col xs="12" sm="12">
<Card className="card-border">
<CardBody>
<FormGroup row>
<Col xs="12" lg="6">
<Field name="consignee_branch_number" type="text" component={FormInput} value={consignee.consignee_branch_number} onChange={handleInputChange} label="Branch Sr No" inputPlaceHolder="Enter Branch Sr No"/>
</Col>
<Col xs="12" lg="6">
<Field name="consignee_add1" type="textarea" component={FormInput} value={consignee.consignee_add1} onChange={handleInputChange} label="Address 1" inputPlaceHolder="Enter Address 1"/>
</Col>
</FormGroup>
</CardBody>
<div style={{
paddingBottom: 30
}}>
<Button color="primary" className="btn-pill pull-right" type="button" onClick={addConsignee} style={{
marginRight: '20px'
}}>
Add
</Button>
</div>
</Card>
</Col>
<div style={{
paddingBottom: 30
}}>
<Button color="primary" className="btn-pill pull-left" onClick={previousPage} style={{
marginLeft: '20px'
}}>
<i className="fa fa-chevron-left"/>
Previous
</Button>
<Button color="primary" className="btn-pill pull-right" type="submit" style={{
marginRight: '20px'
}}>
Next
<i className="fa fa-chevron-right"/>
</Button>
</div>
</CardBody>
</Card>
</Col>
</form>);
};
ConsigneeLocations.propTypes = {
handleSubmit: PropTypes.func,
pristine: PropTypes.bool,
previousPage: PropTypes.func,
submitting: PropTypes.bool
};
export default reduxForm({form: 'consigneesLocation', destroyOnUnmount: false, forceUnregisterOnUnmount: true})(ConsigneeLocations);
My data table component
import React from 'react'
const ConsigneeTables = props => (
<table>
<thead>
<tr>
<th>Branch Number</th>
<th>Address</th>
</tr>
</thead>
<tbody>
{props.consignees.length > 0 ? (
props.consignees.map(consignee => (
<tr key={consignee.id}>
<td>{consignee.consignee_branch_number}</td>
<td>{consignee.consignee_add1}</td>
</tr>
))
) : (
<tr>
<td colSpan={3}>No Data</td>
</tr>
)}
</tbody>
</table>
)
export default ConsigneeTables
Please suggest to me how to handle consignees state. I already use setState onClick but I don't know how to handle consignees state every step.