How to handle multiple Checkboxes in a React State: multiple Arrays?

Question

guys I just used the Shahnawaz example here Handle multiple Checkboxed in a State:Array. How to? but stuck with multiple true IDs when clicking on names/categories with the same projects, for example, will give you duplicated project1 and project2 when checked === true for two categories.....

checked1 (english === true) will give you project1 , project2 checked2 (maths=== true) will give you project1 , project3 checked4 again project1 , project2 duplicated

Any ideas on how to work this out?

import React from "react";

const Checkbox = ({ type = "checkbox", name, checked = false, onChange }) => (
  <input type={type} name={name} checked={checked} onChange={onChange} />
);

const checkboxes = [
  {
    id: "31",
    category: "englsh",
    projects: [
      {
        id: "9",
      },
    ],
  },
  {
    id: "32",
    category: "maths",
    projects: [
      {
        id: "2",
      },
    ],
  },
  {
    id: "33",
    category: "marketing",
    projects: [
      {
        id: "2",
      },
    ],
  },
  {
    id: "34",
    category: "physics",
    projects: [
      {
        id: "2",
      },
    ],
  },
  {
    id: "35",
    category: "media ",
    projects: [
      {
        id: "2",
      },
      {
        id: "10",
      },
    ],
  },
  {
    id: "36",
    category: "science",
    projects: [
      {
        id: "9",
      },
      {
        id: "11",
      },
    ],
  },
];

export default class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      checkedItems: new Map(),
    };

    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e) {
    const item = e.target.name;
    const isChecked = e.target.checked;
    console.log(item);
    console.log(isChecked);
    this.setState((prevState) => ({
      checkedItems: prevState.checkedItems.set(item, isChecked),
    }));
  }

  render() {
    return (
      <div className="row float-center d-flex justify-content-center">
        {checkboxes.map((item) => (
          <label key={item.key} className="m-3">
            <Checkbox
              name={item.name}
              checked={this.state.checkedItems.get(item.name)}
              onChange={this.handleChange}
            />
            {item.name}
          </label>
        ))}
      </div>
    );
  }
}