react table add class cell with editTable

I use react table v7 with editable as defaultColumn, I have a log that returns the index row and the column index.

Is it possible to add a class to the cell if the index row and index column crosses.

my log that returns the row and column index :

const log = {rowIndex:1, columnIndex:10}

The expected result :

editable component :

    import React, { useEffect, useState } from 'react';
    import { OverlayTrigger, Tooltip } from 'react-bootstrap';

    const EditableCell = ({
     value: initialValue,
     row: { index },
     column: { id },
      updateMyData,
      }: {
      value: any;
      row: any;
      column: any;
      updateMyData: any;
       }) => {
        const [value, setValue] = useState(initialValue);
        const [textCount, setTextCount] = useState<number>(0);
        const tooltipName = <Tooltip id="tooltipName">{value}</Tooltip>;

      const onChange = (e: any) => {
        setValue(e.target.value);
      };

     const onBlur = () => {
       updateMyData(index, id, value);
      };

       useEffect(() => {
        setValue(initialValue);
       }, [initialValue]);

      useEffect(() => {
        if (value) {
       setTextCount(value.length);
       }
     }, [value]);

   return (
      <>
       {textCount > 15 ? (
    <OverlayTrigger placement="top" overlay={tooltipName}>
      <input value={value} onChange={onChange} onBlur={onBlur} />
    </OverlayTrigger>
  ) : (
    <>
      <input value={value} onChange={onChange} onBlur={onBlur} />
    </>
  )}
</>
  );
};

 export default EditableCell;

grid :

 import React from 'react';
 import { Table } from 'react-bootstrap';
 import { useSortBy, useTable } from 'react-table';
 import GridRow from './grid-row';
 import GridTfoot from './grid-tfoot';
 import GridThead from './grid-thead';
 import EditableCell from './grid-editable';

 const SimpleGrid = (props: {
  rows: any[];
  columns: any;
  extraCssClassName: string;
  updateMyData?: any;
  defaultSort?: any[];
  editable?: boolean;
  }) => {
 const defaultColumn = {
Cell: EditableCell,
};
  const {
getTableProps,
getTableBodyProps,
headerGroups,
footerGroups,
rows,
prepareRow,
 } = useTable(
   {
  columns: props.columns,
  data: props.rows,
  initialState: {
    sortBy: props.defaultSort,
  },
  defaultColumn: props.editable ? defaultColumn : undefined,
  updateMyData: props.updateMyData,
   },
   useSortBy
  );

  return (
   <Table
  className={`table-nostriped grid-simple mb-0 ${props.extraCssClassName}`}
  responsive
  size="sm"
  {...getTableProps()}
    >
  <GridThead headers={headerGroups} />
  <tbody {...getTableBodyProps()}>
    {rows.map((row, i) => {
      prepareRow(row);
      return <GridRow row={row} key={i} />;
    })}
  </tbody>
  <GridTfoot footerGroups={footerGroups} />
    </Table>
    );
   };

  SimpleGrid.defaultProps = { extraCssClassName: '', defaultSort: [] };

  export default SimpleGrid;

updateMyData :

  const updateMyData = (rowIndex: any, columnId: any, value: any) => {
    setData((old: any) =>
     old.map((row: any, index: any) => {
    if (index === rowIndex) {
      return {
        ...old[rowIndex],
        [columnId]: value,
      };
    }
    return row;
     })
    );
 };