Delete all checked rows using axios in React

I have a react table rendering data that i can get using axios from mysql database. each table row has checkbox. i can check/uncheck all checkboxes using that checkbox in thead.

i need to write code for the the function deleteAll() and call it onClick event of the Delete button( THIS WILL GET VALUES OF ALL CHECKED CHECKBOXES AND PASS IT TO THE API TO DELETE THOSE RECORDS HAVING THOSE VALUES AS IDS)

as i am new to react, i need your help.

here is my code

import React from "react";
import axios from "axios";
import { useState, useEffect} from "react";
import { Link } from "react-router-dom";
import Table from 'react-bootstrap/Table'
import Dashboard from "../login/dashboard";
import { toast } from 'react-toastify'
import 'react-toastify/dist/ReactToastify.css'

const UserGroup = () => {

    const [data, setData] = useState([]);

    function dataRender(item, index) {

        return (
            <tr key={index +1}>
                <td className="text-center"><input 
                        type="checkbox" className="form-check-input"
                        key={item.id}
                        id={item.id}
                        name={item.id}
                        value={item.id}
                        checked={item?.isChecked || false}
                        onChange={handleChange}
                        /></td>
                <td className="text-center">{index + 1}</td>
                <td className="text-center">{item.id}</td>
                <td className="text-left">{item.name_eng}</td>
                <td className="text-right">{item.name}</td>
                <td className="text-center">{(item.active == 1) ? 'Yes' : 'No'}</td>
            </tr>
        )
      }

    useEffect(() =>{
        loadData();
    }, [])

    const loadData = async ()=>{
        await axios.get('http://localhost/sits_api/sysAdmin/userGroup.php')
        .then((result)=>{
            setData(result.data);
        })
    }


    const deleteAll = ()=>{
     // I NEED TO CODE THIS FUNCTION
    }
    
     
    // hand CHECK ALL CHECKBOXES
    const handleChange = (e) => {
        const {name, checked} = e.target;

        if(name==="allSelect")
            {
                let tempItem = data.map((item) => {
                    return {...item, isChecked: checked }
                });
                setData(tempItem);
            }
        else
            {
                let tempItem = data.map((item) =>
                item.id === name ? {...item, isChecked: checked } : item
                );
                setData(tempItem);
            }
    }
    /////////////////////
    return(
        <>
            <Dashboard/>

            <div className="div-content">
                <div>
                    <label className="headline">User Groups List</label>
                    <nav className="navbar navbar-expand-bg navbar-light">
                        <div className="container">
                            <Link className="btn btn-primary" to={'/usergroupadd'}>Add New</Link>
                            <Link className="btn btn-danger" to=''onClick={() => {deleteAll()}}>Delete</Link>
                        </div>
                    </nav>                  
                </div>

                <Table striped bordered hover>
                    <thead>
                        <tr>
                            <th className="text-center"><input
                                type="checkbox" className="form-check-input"
                                name="allSelect"
                                checked={data.filter((item) => item?.isChecked !== true).length < 1}
                                onChange={handleChange}
                                /></th>
                            <th className="text-center">#</th>
                            <th className="text-center">ID</th>
                            <th className="text-left">Eng. Name</th>
                            <th className="text-right">الاسم العربى</th>
                            <th className="text-center">Active</th>
                        </tr>
                    </thead>
                    <tbody>
                        {data.map(dataRender)}
                    </tbody>
                </Table>
            </div>
        </>
    );
}
export default UserGroup;