How to display and handle dynamic checkoxes that are dependent on Task array value in the backend (Mongodb) in react js?

Question

I working on a react project where I have requirement like,

I have array inside contain, 1 Object and 1 Array named Task[]

"contractor": [
                {
                  "contractGivenBy": -1,
                  "contractorID": 0,
                  "contractorName": "contractor1",
                  "reviewedByAssigner": false,
                  "submitReviewToAssigner": false,
                  "tasks": [ 2, 4, 6 ],
                  "tasksDone": false
                },

Now, I want to display the Tasks array as Checkboxes in the page.

That is nice, I displayed all checkboxes using map() method, But the problem is, How to handle (get values from those checkboxes) when user checked or unchecked the specific checkbox.

I'm using React functional component with React hooks.

Here is what is tried..

   <form onSubmit={onSubmitHandler}>
      {               
         projectData.contractor[0].tasks.map((task, index) => {
              return (
                     <div style={{ flexDirection: "column" }}>

                         <FormControlLabel
                             control={
                                 <Checkbox
                                    checked={false}
                                    value={task}
                                    onChange={handleTask} />
                                }
                                 label={`task ${task}`}
                                />
                              </div>
                             )
                           })
                          }
          <Button 
              type="submit" 
               style={{ 
                   backgroundColor:"rgba(25,123,189)", 
                   color: "white" 
                 }}>
            Assgin
          </Button>
    </form>

Answer 1

UPDATED

Here you go , it uses react hooks with checkbox implementation, i have tweaked it a little with <input type /> but you will get the idea

import React, { useState } from "react";
import ReactDOM from "react-dom";

const Checkbox = ({ type = "checkbox", name, checked = false, onChange }) => {
  console.log("Checkbox: ", name, checked);

  return (
    <input type={type} name={name} checked={checked} onChange={onChange} />
  );
};

const CheckboxExample = () => {
  const [checkedItems, setCheckedItems] = useState({});

  const handleChange = event => {
    setCheckedItems({
      ...checkedItems,
      [event.target.name]: event.target.checked
    });
    console.log("checkedItems: ", checkedItems);
  };

  const checkboxes = [
    {
      name: "check-box-1",
      key: "checkBox1",
      label: "Check Box 1"
    },
    {
      name: "check-box-2",
      key: "checkBox2",
      label: "Check Box 2"
    }
  ];

  return (
    <div>
      <lable>Checked item name : {checkedItems["check-box-1"]} </lable> <br />
      {checkboxes.map(item => (
        <label key={item.key}>
          {item.name}
          <Checkbox
            name={item.name}
            checked={checkedItems[item.name]}
            onChange={handleChange}
          />
        </label>
      ))}
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<CheckboxExample />, rootElement);