input box in the inline editor lose focus and state on change about react-base-table HOT 7 CLOSED

  const components = {
    TableCell: EditableCell,
  };

const { Overlay } = ReactOverlays;
const CellContainer = styled.div`
  display: flex;
  flex: 1 0 100%;
  align-items: center;
  height: 100%;
  width: 100%;
  overflow: hidden;
  margin: 0 -5px;
  padding: 5px;
  border: 1px dashed transparent;
`
const GlobalStyle = createGlobalStyle`
  .BaseTable__row:hover,
  .BaseTable__row--hover {
    ${CellContainer} {
      border: 1px dashed #ccc;
    }
  }
`
const Input = styled.input`
  width: 100%;
  height: 30px;
  margin-top: 10px;
`

export default () => {
  const [getColumns, setColumns] = React.useState([]);
  const [getData, setData] = React.useState([]);
  const [isLoading, setLoading] = React.useState(true);

  React.useEffect(() => {
    if (isLoading) {
      const columns = generateColumns(2);
      const data = generateData(columns, 4);
      setColumns(columns);
      setData(data);
      //   columns.forEach(column => {
      //   column.cellRenderer  = EditableCell
      //   });
      setLoading(false);
    }
  }, [isLoading])


  const updateCell = (value, cellProps) => {
    setData(data => data.map(cell => cell.id == cellProps.rowData.id ?
      {
        ...cell,
        [cellProps.column.key]: value
      }
      : cell
    ));
  }

  const EditableCell = (cellProps) => {
    handleChange = e => {
      updateCell(e.target.value, cellProps)
    }
    return (
      <Input autoFocus type="text" value={cellProps.cellData}
        onChange={this.handleChange} />
    );
  };


  if (isLoading)
    return (<h1>loading...</h1>)

  const components = {
    TableCell: EditableCell,
  };

  return (
    <>
      <GlobalStyle />
      <Table fixed
        columns={getColumns}
        data={getData}
        components={components}
      />
    </>
  )
}