From checkboxes are not unchecked when form submitted

I am currently working on a ReactJS project. I have a form that should console.log the form fields onSubmit as object. In that form, I have few checkboxes (pulled from the DB by RestAPI and rendered by other react component).

After submit, the checkboxes are not being UNCHECKED. My problem is that when I am unchecking them manually, it adds the unchecked data to the data object.

How can I uncheck the checkboxes onSubmit without doing it manually?

Here is the page code:

import React, { useState, useEffect } from 'react';
import FCIngredient from '../FunctionalComps/FCIngredient';
import { useNavigate } from 'react-router-dom';
import $ from 'jquery';

const apiUrl = 'https://somelocalhost/'

export default function NewRecipePage() {
    const navigate = useNavigate();
    const [ingredients, setIngredients] = useState([])
    const [recipeIngredients, setRecipeIngredients] = useState([])

    const addIngredientToRecipe = (ingredientObject) => {
        let tmpIngArr =[...recipeIngredients,ingredientObject];
        setRecipeIngredients([...tmpIngArr])
        tmpIngArr = [];
    }
    const Go2Home = () => {
        navigate('/');
    }
    const NewRecipeSubmited = (event) => {
        //$(".checkClass").attr("checked", false);//didn't work

        const recipeObject = {
            Name: event.target.recName.value,
            ImageUrl: event.target.recUrl.value,
            CoockingMethod: event.target.recMethod.value,
            CoockingTime:event.target.recTime.value
        }
        console.log('recipeObject: ',recipeObject);
        console.log('recipeIngredients: ',recipeIngredients);
        let cleaningArr = [];
        setRecipeIngredients(cleaningArr);
        event.preventDefault();

    }
  
    useEffect(() => {
        fetch(apiUrl, {
            method: 'GET',
            headers: new Headers({
                'Content-Type': 'application/json; charset=UTF-8',
                'Accept': 'application/json; charset=UTF-8'
            })
        })
            .then(res => {
                return res.json()
            })
            .then(
                (result) => {
                    setIngredients(result)
                    console.log(ingredients);
                },
                (error) => {
                });
    },[])


    return (
        <div style=>
            <h1>New Recipe</h1>
            <button onClick={Go2Home} >Back Home</button> <br />

            <form onSubmit={NewRecipeSubmited}>
                <input name="recName" type="text" placeholder='Recipe Name' /><br />
                <input name="recMethod" type="text" placeholder='Cooking Method' /><br />
                <input name="recTime" type="text" placeholder='Cooking Time' /><br />
                <input name="recUrl" type="url" placeholder='Recipe imageURL' /><br />
                <p>Please choose the ingredients for your recipe!</p>
                <div style=>
                    {ingredients.map((ing) =>
                        <div>
                            <input type="checkbox" className='checkClass' onChange={() => {addIngredientToRecipe(ing)}} id={ing.IngredientId}/>
                            <FCIngredient ingredient={ing} key={ing.IngredientId} /></div>)}
                </div>
                <button type="submit">Add your new recipe!</button>

            </form>
        </div>
    )
}