React Hooks, state is reseting to initial state when called onChange is called inside Formatter

Hi AllenFang, Thank you for all the support. I just have a question and I am not sure if I am doing it right or if it is even possible.

I am trying to change the value of my react hook state when OnChange is triggered inside formatter but for some reason the state always goes back to initial state ([]) when press any key and the current state is lost.

Here is some part o f my code.

import React, { useState, useEffect } from 'react'
import { connect } from 'react-redux'
// import 'react-bootstrap-table-next/dist/react-bootstrap-table2.min.css';
import BootstrapTable from 'react-bootstrap-table-next';
import paginationFactory from 'react-bootstrap-table2-paginator';

import {
Button,
CardSubtitle,
CardTitle,
Col,
TabPane,
Label,
Row,
InputGroup,
Input

} from "reactstrap"

import Switch from '@material-ui/core/Switch';
import CurrencyInput from 'react-currency-input-field';

import { setChequesCollections } from '../../../store/contracts/actions'
import { update } from 'lodash'

export const ChequeInfo = (props) => {

const [cheques,setCheques] = useState([

])

// const updateChequeNo = (e,index) =>{
// e.preventDefault()
// console.log(e.target.value)
// console.log(index)
// console.log(cheques)
// // setCheques(tempArray)

// }

const updateChequeName = (e,index) =>{
e.preventDefault()
let tempArray = [...cheques]
let tempElement = [...tempArray[index]]
tempElement.chequeName = e.target.value
tempArray[index] = tempElement
setCheques(tempArray)
}

const updateBankName = (e,index) =>{
e.preventDefault()
let tempArray = [...cheques]
let tempElement = [...tempArray[index]]
tempElement.bankName = e.target.value
tempArray[index] = tempElement
setCheques(tempArray)
}

const updateDate = (e,index) =>{
e.preventDefault()
let tempArray = [...cheques]
let tempElement = [...tempArray[index]]
tempElement.date = e.target.value
tempArray[index] = tempElement
setCheques(tempArray)
}

const updateAmount = (e,index) =>{
e.preventDefault()
let tempArray = [...cheques]
let tempElement = [...tempArray[index]]
tempElement.amount = e.target.value
tempArray[index] = tempElement
setCheques(tempArray)
}

const [columns,setColumns] = useState([
{
dataField:'chequeNo',
text:'Cheque No',
formatExtraData:{cheques},
formatter:(cell,row,rowIndex,formatExtraData) => (
console.log(formatExtraData)}
/>

)

},
{
dataField:'chequeName',
text:'NAME',
formatExtraData:cheques,
formatter:(cell,row,rowIndex,formatExtraData) => (
console.log(formatExtraData)}
/>

)

},
{
dataField:'bankName',
text:'Bank',
formatExtraData:cheques,
formatter:(cell,row,rowIndex,formatExtraData) => (
console.log(formatExtraData)}
/>

)

},
{
dataField:'date',
text:'DATE',
formatExtraData:cheques,
formatter:(cell,row,rowIndex,formatExtraData) => (
console.log(formatExtraData)}
/>

)

},
{
dataField:'amount',
text:'AMOUNT',
formatExtraData:cheques,
formatter:(cell,row,rowIndex,formatExtraData) => (
console.log(formatExtraData)}
/>

)

}

])

var chequeDate = new Date(props.startDate)

const handlePaymentNo = (e) => {
e.preventDefault()
setCheques([])
const count = e.target.value
var chequeTimeZoneDiff = props.startDate.getTimezoneOffset().toString().substring(1)
// var chequeTimeZoneDiff = props.startDate().getTimeZoneOffset().toString().substring(1)
chequeDate.setHours(0, Number(chequeTimeZoneDiff), 0)
const duration = Math.round(props.endDate - props.startDate)
const calculateDuration = duration / (1000 * 60 * 60 * 24)

switch (count) {

case '1':

setCheques(chequeArray=>[...chequeArray,{
index: 0,
cleared: false,
contractNo: props.contractNo,
chequeName: props.selectedTenant.name,
chequeNo: '00000',
bankName: '',
date: new Date(props.startDate).toString(),
amount: props.selectedProperty.amount,
propertyId: props.selectedProperty.propertyId
}])

break

default:

for (let a = 1; a <= count; a++) {

if (a === 1) {

setCheques(chequeArray =>[...chequeArray,{
index: 0,
cleared: false,
contractNo: props.contractNo,
chequeName: props.selectedTenant.name,
chequeNo: '00000',
bankName: '-',
date: new Date(props.startDate).toString(),
amount: props.selectedProperty.amount / count,
propertyId: props.selectedProperty.propertyId
}])

}
else {
chequeDate.setDate(
chequeDate.getDate() + (calculateDuration / count) * (a - 1) - 1
)
setCheques(chequeArray => [...chequeArray,{
index: a + 1,
cleared: false,
contractNo: props.contractNo,
chequeName: props.selectedTenant.name,
chequeNo: '00000',
bankName: '-',
date: new Date(chequeDate).toString(),
amount: props.selectedProperty.amount / count ,
propertyId: props.selectedProperty.propertyId
}])

console.log(cheques)
chequeDate = new Date(props.startDate)
}
}
}

props.setChequesCollections(cheques)
// chequeCollections = []
console.log(chequeCollections)
console.log(props.chequesCollection)
console.log(cheques)

}

const options = {
filterType: 'checkbox'
}

useEffect(() => {
}, [])

return (