React and tui.grid : how to remove a row

RemoveButtonRenderer.jsx

import React from 'react';
import { render } from 'react-dom';


class RemoveButtonRenderer {
  element;

  constructor(props) {
    this.element = document.createElement('div');

    const { onRemoveButtonClicked } = props.columnInfo.renderer.options;
    const { rowKey } = props;

    render(
      <button type="button" onClick={() => onRemoveButtonClicked(rowKey)}>x</button>,
      this.element
    );
  }

  getElement() {
    return this.element;
  }
}

export default RemoveButtonRenderer;

Table.jsx

import React, { useState } from 'react';
import Grid from '@toast-ui/react-grid';
import RemoveButtonRenderer from './RemoveButtonRenderer.jsx';


const Table = () => {
  const [fruits, setFruits] = useState([
    {
      name: 'apple',
      color: 'green',
      size: 'medium'
    }, {
      name: 'banana',
      color: 'yellow',
      size: 'medium'
    }, {
      name: 'tomato',
      color: 'red',
      size: 'small'
    }
  ]);
  
  const onRemoveButtonClicked = (rowIndex) => {
    const updatedFruits = [...fruits];
    updatedFruits.splice(rowIndex, 1);
    setFruits(updatedFruits);
  };
  
  const columns = [
    {
      header: 'Fruit name',
      name: 'name'
    },
    {
      header: 'Fruit color',
      name: 'color'
    },
    {
      header: 'Fruit size',
      name: 'size'
    },
    {
      header: ' ',
      name: 'removeRow',
      align: 'center',
      width: 20,
      renderer: {
        type: RemoveButtonRenderer,
        options: {
          onRemoveButtonClicked
        }
      }
    }
  ];
  
  return (
    <Grid
      data={fruits}
      columns={columns}
    />
  );
};