How to get all checkbox IDs that are checked using Javascript?

I'm working on a project named "Food Recipes", where a user can create, edit, delete his own recipes.

When creating a new recipe, the user must select the ingrediets. So here is where I need your help:

By an axios call, I'm getting all the ingredients and show them into a table. The table looks like this:

|---------------------|------------------|-----------------|
|      Ingredient     |    Check         |     Amount      |
|---------------------|------------------|-----------------|
|      Tomato         |     true         |      2 kg       |
|---------------------|------------------|-----------------|
|      Potato         |     false        |                 |
|---------------------|------------------|-----------------|
|      Onion          |     true         |      1 kg       |
|---------------------|------------------|-----------------|

After checking some ingredient to TRUE, I want to have onChange function that will create list of IDs, from all ingredients that are CHECKED (in this case, I will have list with two elements: ID from Tomato, and ID from Onion)

To mention, i put ingredient ID as a value inside the <input type="checkbox"/>

Here is my code:

import React, {Component, useEffect, useState} from 'react'
import axios from "../../../axios/axios"

class Ingredient extends Component {
    constructor(props){
        super(props)
        this.state = {
            ingredients: [],
            ingedientsList: [],
            isChecked: false,
        }
    }
    onIngredientChange = (e) => {
          //HERE
    };

    componentDidMount() {
        axios.get("/ingredients").then((data) => {
            const ingredients = Object.keys(data.data).map((ingredient, index) => {
                return (
                    <tr key={index}>
                        <td scope="col">
                            <label>{data.data[index].name}</label>
                        </td>
                        <td scope="col">
                            <input
                                id={data.data[index].id}
                                key={index}
                                type="checkbox"
                                name={"newIngredients"}
                                value={data.data[index].id}
                                onChange={this.onIngredientChange}

                            />
                        </td>
                        <td scope="col">
                            <input
                                id={data.data[index].id + "amount"}
                                key={index}
                                type="number"
                                min="0"
                                max="500"
                                name="amount"
                                placeholder="grams"
                                onChange={this.onIngredientChange}
                            />
                        </td>
                    </tr>
                );
            });
            this.setState({ingredients: ingredients});
        });
    }
    render() {
        return (
            <div className="form-group">
                <table className="table tr-history table-striped small">
                    <thead>
                    <tr>
                        <th scope="col">
                            <h5>Ingredient</h5>
                        </th>
                        <th scope="col">
                            <h5>Check</h5>
                        </th>
                        <th scope="col">
                            <h5>Amount</h5>
                        </th>
                    </tr>
                    </thead>
                    <tbody>
                    {this.state.ingredients}
                    </tbody>
                </table>
            </div>
        )
    }
}
export default Ingredient;