удалить выбранный элемент из Таблицы. React

Нужно нажатием на button удалить строку у которой выделен checkbox

class Table extends Component {
    constructor(props) {
      super(props);
      this.state = {
        droplets: [],
        allSelected: false,
        isChecked: false
      }
      this.toggleSelectAll = this.toggleSelectAll.bind(this);
      this.toggleSelect = this.toggleSelect.bind(this);
      this.handleChecked = this.handleChecked.bind(this);
      **this.handleDelete = this.handleDelete.bind(this);**
    }
    async componentDidMount() {
      const res = await fetch('http://api.npoint.io/324f4ca2cdd639760638');
      const droplets = await res.json();
      this.setState({ 'droplets': droplets })
    }
    
    toggleSelect(dropletToToggle) {
      this.setState({isChecked: !this.state.isChecked});
      this.setState((prevState) => {
        const newDroplets = prevState.droplets.map((dplt) => {
          if (dplt === dropletToToggle) {
            return { ...dplt, checked: !dplt.checked };
          }
          return dplt;
        });
  
        return {
          ...prevState,
          droplets: newDroplets,
          allSelected: newDroplets.every((d) => !!d.checked)
        };
      });
    }
  
    
    toggleSelectAll() {
      this.setState({isChecked: !this.state.isChecked});
      this.setState((prevState) => {
        const toggle = !prevState.allSelected;
        const newDroplets = prevState.droplets.map((x) => ({
          ...x,
          checked: toggle
        }));
        
        return {
          ...prevState,
          droplets: newDroplets,
          allSelected: toggle
        };
      });
    }
    handleChecked () {
      this.setState({isChecked: !this.state.isChecked});
    }
   

    **handleDelete = isChecked => {
      this.setState(state => {
        const { droplets } = state;
        const filteredDroplets = droplets.filter(item => item.id !== isChecked);
        return {
          droplets: filteredDroplets
        };
      });
    };**

    render() {
      
      return (
        <div className="body">
          <div className="title">Таблица пользователей</div>
          <table className="panel">
            <Tablehead
              toggleSelectAll={this.toggleSelectAll}
              allSelected={this.state.allSelected}
            />
            <tbody className="row">
              <TableBody
                droplets={this.state.droplets}
                toggleSelect={this.toggleSelect}
              />
            </tbody>
          </table>
          **<button className="button" onClick = {this.handleDelete} >Удалить выбранные</button>**
        </div>
      );
    }
  }

второй файл в котором элемент для удаления

const TableBody = ({ droplets, toggleSelect}) => {

  return (
    <>
      {droplets.map((droplet, item) => (
        <tr className={s.area} key={item.id} > 
          <td>
            <Checkbox
              handleClick={() => toggleSelect(droplet)}
              isChecked={!!droplet.checked}
            />
          </td>
          <td>{droplet.num}</td>
          <td>{droplet.first_name + " " + droplet.last_name}</td>
          <td>{date_form(droplet.date_of_birth)}</td>
          <td>{height_form(droplet.height)}</td>
          <td>{weight_form(droplet.weight)}</td>
          <td>{salary_form(droplet.salary)}</td>
          <td>
            <button type="submit" className={s.button}>
              <Edit />
            </button>
          </td>
          <td>
            <button type="submit" className={s.button}>
              <Trash />
            </button>
          </td>
        </tr>
      ))}
    </>
  );
};

https://codesandbox.io/s/sweet-butterfly-0s4ff?file=/src/Table.jsx