Select All check Box not working ideally when we switch tabs where all the data is being rendered from nested json array in react

Question

The below is the reponse data from api which I get

[
  {
    zip_file: [
      {zip: "a.zip"},
      {zip: "b.zip"},
      {zip: "c.zip"}
    ],
    text_files: [
      {text: "a.txt"},
      {text: "b.txt"},
      {text: "c.txt"}
    ],
    pdf_files: [
      {pdf: "a.pdf"},
      {pdf: "b.pdf"},
      {pdf: "c.pdf"},
    ]
  }
];

I am trying to create dynamic tabs from json data where each key name will be name of tab(i,e zip_file,text_file,pdf_file) and key's array object will be body of tab as list of check boxes (i,e for zip file it will have ☑ a.zip , ☑ b.zip, ☑ c.zip)and have select all checkbox( ☑ Select All) for every tab where it should select only list of that particular tab(i,e in zip tab select All should select all the three entries).

Issue that I am facing now is when I click on select all option, all the list items are being fetched and value is stored in an array but only the last element of the list is being checked(i,e it has ☑ mark) and not the rest others(i.e ☐)

second issue is when I click on select All option in one tab and switch to next tab ,that tab's select All check Box is also selected (which I don't want ,it should be independent for each tabs)

Below is the Code snippet

import { useEffect, useState } from "react";
import Tab from "./Tab";import "bootstrap/dist/css/bootstrap.css";
import Download from "./Download";

const SimpleTab = () => {
  const [data, setData] = useState([]);
  const [file, setFile] = useState([]);
  const [checked, setChecked] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch(`http://localhost:9080/...........`);
      const responseData = await response.json();
      setData(responseData);
    };
  });

  // This is to add or remove checked value into an array
  const addOrRemove = (name) => {
    const index = file.indexOf(name);
    if (index === -1) {
      file.push(name);
    } else {
      file.splice(index, 1);
    }

    setFile(file);
  };


  //To retain the state of checked on change
  const handleChange = (e, name) => {
    setChecked({
      ...checked,
      [name]: e.target.checked,
    });
    console.log("checked " + checked);
  };

  return (
    <>
      <Header />
      <Download arraylink={file} />
      <Tab>
        {data.map((tab, id) =>
          Object.entries(tab).map(([key, value]) => (
            <Tab.TabPane key={`Tab-${key}`} tab={key} className="tabs">
              <input
                type="checkbox"
                onChange={(e) => {
                  value.map((tab1, idx) =>
                    Object.entries(tab1).map(([key1, value1]) =>
                      addOrRemove(value1)
                    )
                  );

                  value.map((tab1, idx) =>
                    Object.entries(tab1).map(([key1, value1]) =>
                      handleChange(e, value1)
                    )
                  );
                }}

                //checked={checked[value1] || ""}
              ></input>

              {value.map((tab1, idx) =>
                Object.entries(tab1).map(([key1, value1]) => (
                  <table className="table table-bordered">
                    <tbody>
                      <tr key={value1}>
                        <th scope="row">
                          <input
                            type="checkbox"
                            onChange={(e) => {
                              addOrRemove(value1);
                              handleChange(e, value1);
                            }}
                            checked={checked[value1] || ""}
                          ></input>
                        </th>
                        <td>{value1}</td>
                      </tr>
                    </tbody>
                  </table>
                ))
              )}
            </Tab.TabPane>
          ))
        )}
      </Tab>
     
    </>
  );
};

export default SimpleTab;

I'm new to react, if someone can please help me figure out what's wrong in my code or even suggest any other approach it would be great. Thank you in Advance.