How do I edit an array inside a cell in my React-bootstrap table?

Question

As shown in the link below. I have an array inside a cell, when a click on those cell to edit them, they turns to [object, object] instead of their default values.

The first picture shows the error that I get, the [object, object] in the fields:

This one shows what should happen in a normal case:

import React, { useEffect, useState } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { Container, Col, Row } from 'react-bootstrap';
import Header from '../../components/Header';
import SocieteSideBar from '../../components/SocieteSideBar';
import moment from 'moment';
import Spinner from '../../components/Spinner';
import AlertMsg from '../../components/AlertMsg';
import { listSocietes } from '../../actions/societeActions';
import CountUp from 'react-countup';
import CardItem from '../../components/CardItem';
import { Link } from 'react-router-dom';
import BootstrapTable from 'react-bootstrap-table-next';
import paginationFactory from 'react-bootstrap-table2-paginator';
import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
import cellEditFactory from 'react-bootstrap-table2-editor';
import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';

const ListSocietesScreen = ({ history }) => {
  const dispatch = useDispatch();

  const societeList = useSelector((state) => state.societeList);
  const {
    loading: loadingSocietes,
    error: errorSocietes,
    societes,
  } = societeList;

  const userLogin = useSelector((state) => state.userLogin);
  const { userInfo } = userLogin;

  useEffect(() => {
    dispatch(listSocietes());
  }, [history, dispatch]);

  const { SearchBar } = Search;

  const data =
    societes &&
    societes.map((societe) => ({
      societe: societe.nomSociete,
      nationalite: societe.nationalite,
      identite: societe.representants,
      nationaliteRepresentant: societe.representants,
      pieceIdentite: societe.representants,
      dateDebut: societe.representants,
      dateFin: societe.representants,
    }));

  const representantsIdentite = (cell, row, rowIndex, formatExtraData) => {
    return cell.map((x) => {
      return (
        <p key={x._id}>
          {' '}
          <span>{x.identite}</span>
        </p>
      );
    });
  };

  const representantsNationaliteRepresentant = (
    cell,
    row,
    rowIndex,
    formatExtraData
  ) => {
    return cell.map((x) => {
      return (
        <p>
          <span> {x.nationaliteRepresentant}</span>
        </p>
      );
    });
  };

  const representantsPieceIdentite = (cell, row, rowIndex, formatExtraData) => {
    return cell.map((x) => {
      return (
        <p>
          <span>{x.pieceIdentite}</span>
        </p>
      );
    });
  };

  const representantsDateDebut = (cell, row, rowIndex, formatExtraData) => {
    return cell.map((x) => {
      return (
        <p>
          <span>{x.dateDebut}</span>
        </p>
      );
    });
  };

  const representantsDateFin = (cell, row, rowIndex, formatExtraData) => {
    return cell.map((x) => {
      return (
        <p>
          <span>{x.dateFin}</span>
        </p>
      );
    });
  };

  const columns = [
    {
      dataField: 'societe',
      text: 'Test1',
      headerStyle: {
        backgroundColor: '#e9ecef',
      },
    },
    {
      dataField: 'nationalite',
      text: 'Test2',
      headerStyle: {
        backgroundColor: '#e9ecef',
      },
    },
    {
      dataField: 'identite',
      text: 'Test3',
      formatter: representantsIdentite,
      headerStyle: {
        backgroundColor: '#e9ecef',
      },
    },
    {
      dataField: 'nationaliteRepresentant',
      text: 'Test4',
      formatter: representantsNationaliteRepresentant,
      headerStyle: {
        backgroundColor: '#e9ecef',
      },
    },
    {
      dataField: 'pieceIdentite',
      text: 'Test5',
      formatter: representantsPieceIdentite,
      headerStyle: {
        backgroundColor: '#e9ecef',
      },
    },
    {
      dataField: 'dateDebut',
      text: 'Test6',
      formatter: representantsDateDebut,
      headerStyle: {
        backgroundColor: '#e9ecef',
      },
    },
    {
      dataField: 'dateFin',
      text: 'Test7',
      formatter: representantsDateFin,
      headerStyle: {
        backgroundColor: '#e9ecef',
      },
    },
  ];

  const defaultSorted = [
    {
      dataField: 'dateFin',
      order: 'asc',
    },
  ];

  const afterSaveCell = (oldValue, newValue, row, column) => {
    // dispatch(
    //   updatePersonne(row.codePosteReel, {
    //     [column.dataField]: newValue ? newValue : '-',
    //   })
    // );
  };

  const onStartEdit = (row, column, rowIndex, columnIndex) => {
    row.identite.map((x) => 123);
  };

  return (
    <>
      {' '}
      <div id="root">
        <div className="app">
          <SocieteSideBar />
          <main>
            <Header
              headerImage={
                <img
                  src="/assets/images/group.png"
                  alt="group"
                  style={{
                    width: '6%',
                    marginRight: '10px',
                    marginLeft: '10px',
                  }}
                ></img>
              }
              headerTitle="Liste des sociétés"
            />
            <Container
              className="mb-4 mt-2 pt-3  pb-3 "
              style={{
                backgroundColor: '#fff',
                transition: 'box-shadow 0.25s',
                boxShadow:
                  '0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%)',
              }}
            >
              <h6 className="font-weight-bold">Situations des sociétés </h6>
              <Row>
                <Col md={6} lg={3} sm={12}>
                  <Link to="/tickets">
                    <CardItem
                      icon="fas fa-building fa-4x"
                      title="Sociétés"
                      number={<CountUp end={43} durantion={5} />}
                      color={{
                        transition: 'box-shadow 0.25s',
                        boxShadow:
                          '0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%)',
                        borderRadius: '5px',
                        background: `linear-gradient(
                            45deg,
                            #4099ff,
                            #73b4ff
                          )`,
                      }}
                    />
                  </Link>
                </Col>
                <Col md={6} lg={3} sm={12}>
                  <Link to="/tickets">
                    <CardItem
                      icon="fas fa-users fa-4x"
                      title="Representants sociétés"
                      number={<CountUp end={33} durantion={5} />}
                      color={{
                        backgroundColor: '#ffcb7d',
                        transition: 'box-shadow 0.25s',
                        boxShadow:
                          '0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%)',
                        borderRadius: '5px',
                        background: `linear-gradient(45deg,#50C9C3,#96DEDA)`,
                      }}
                    />
                  </Link>
                </Col>
                <Col md={6} lg={3} sm={12}>
                  <Link to="/tickets">
                    <CardItem
                      icon="fas fa-exclamation-triangle fa-4x"
                      title="Autorisations à renouvler"
                      number={<CountUp end={7} durantion={5} />}
                      color={{
                        backgroundColor: '#f8911f',
                        transition: 'box-shadow 0.25s',
                        boxShadow:
                          '0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%)',
                        borderRadius: '5px',
                        background: `linear-gradient(45deg,#F7971E,#FFD200)`,
                      }}
                    />
                  </Link>
                </Col>
                <Col md={6} lg={3} sm={12}>
                  <Link to="/tickets">
                    <CardItem
                      icon="fas fa-minus-circle fa-4x"
                      title="Liste noire"
                      number={<CountUp end={20} durantion={5} />}
                      color={{
                        backgroundColor: '#f08d7b',
                        transition: 'box-shadow 0.25s',
                        boxShadow:
                          '0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%)',
                        borderRadius: '5px',
                        background: `linear-gradient(45deg,#e53935,#e35d5b)`,
                      }}
                    />
                  </Link>
                </Col>
              </Row>
            </Container>

            <Container
              className="mb-4 mt-4 pt-3 pb-3 font-weight-bold"
              style={{
                backgroundColor: '#fff',
                transition: 'box-shadow 0.25s',
                boxShadow:
                  '0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%)',
              }}
            >
              {data && (
                <ToolkitProvider
                  keyField="id"
                  data={data}
                  columns={columns}
                  columnToggle
                  search
                >
                  {(props) => (
                    <>
                      <Container>
                        <h5>
                          <i className="fas fa-search"></i> Rechercher :
                        </h5>
                        <Row>
                          <Col md={8} lg={8}>
                            {' '}
                            <SearchBar {...props.searchProps} />
                          </Col>
                        </Row>
                      </Container>
                      <hr />
                      <hr />
                      <BootstrapTable
                        {...props.baseProps}
                        keyField="id"
                        bootstrap4={true}
                        data={data}
                        columns={columns}
                        wrapperClasses="table-responsive text-center"
                        hover
                        noDataIndication="Table is Empty"
                        defaultSorted={defaultSorted}
                        pagination={paginationFactory()}
                        filter={filterFactory()}
                        cellEdit={cellEditFactory({
                          mode: 'click',
                          onStartEdit,
                          afterSaveCell,
                        })}
                      />
                    </>
                  )}
                </ToolkitProvider>
              )}
            </Container>
          </main>
        </div>
      </div>
    </>
  );
};

export default ListSocietesScreen;