Why am I not able to post my data with react?

For now, only apply:0 data are displayed by default in my table.I'm trying to send to my API when you click on Apply button, a list of all ids applied and not applied for instance : data:{apply: [3], notApply:[1,2]}. Hereapply field in my data means the value is equal to 1 --> not displayed in the table; and notApply - i.e equal to 0 --> displaying data.

So when I click on the toggle button under the show column, it should turns to 1 the statusapply (not displaying the row data in my table which is not the case). The Cancel button sends nothing to my API.

Here what I've tried (but not working):

 export default function MenuDisplayApi() {
  const { menuId } = useParams();
  const { match } = JsonData;
  const [selected, setSelected] = useState({});
  const [hidden, setHidden] = useState({});
  const [menus, setMenus] = useState([]);
  const [applyStatus, setApplyStatus]=useState(false)

  useEffect(() => {
    axios.post(url,{menuId:parseInt(menuId)})
        .then(res => {
            console.log(res)
            setMenus(res.data.menus)
        })
        .catch(err => {
            console.log(err)
        })
}, [menuId]);

  // If any row is selected, the button should be in the Apply state
  // else it should be in the Cancel state
  const [data, setData]= useState({
    notApply:data.notApply,
    apply: data.apply 
  })
  function submit(e){
    e.preventDefault()
    axios.post(url,{
      notApply:data.notApply,
      apply: data.apply 
    })
    .then(res => {
      console.log(res)
    }) 
  }

  // useEffect(() => {
  //   const data = {   
  //     notApply:notApply,
  //     apply: apply 
  //   }
  //   console.log('check', data)
  // }, [])  

  // function handle(e){
  //   const newdata={...data}
  //   newdata[e.target.id]=e.target.value
  //   setData(newdata)
  //   console.log(newdata)
  // } 

  const buttonMode = Object.values(selected).some((isSelected) => isSelected)
    ? "apply"
    : "cancel";

  const rowSelectHandler = (id) => (checked) => {
    setSelected((selected) => ({
      ...selected,
      [id]: checked
    }));
  };

  const handleClick = () => {
    if (buttonMode === "apply") {
      // Hide currently selected items
      const currentlySelected = {};
      Object.entries(selected).forEach(([id, isSelected]) => {
        if (isSelected) {
          currentlySelected[id] = isSelected;
        }
      });
      setHidden({ ...hidden, ...currentlySelected });

      // Clear all selection
      const newSelected = {};
      Object.keys(selected).forEach((id) => {
        newSelected[id] = false;
      });
      setSelected(newSelected);
    } else {
      // Select all currently hidden items
      const currentlyHidden = {};
      Object.entries(hidden).forEach(([id, isHidden]) => {
        if (isHidden) {
          currentlyHidden[id] = isHidden;
        }
      });
      setSelected({ ...selected, ...currentlyHidden });

      // Clear all hidden items
      const newHidden = {};
      Object.keys(hidden).forEach((id) => {
        newHidden[id] = false;
      });
      setHidden(newHidden);
    }
  };

  const matchData = (
    menus.filter(({ _id }) => {
    return !hidden[_id];
  });

  const getRowProps = (row) => {
    return {
      style: {
        backgroundColor: selected[row.values.id] ? "lightgrey" : "white"
      }
    };
  };

  const data = [
    {
      Header: "id",
      accessor: (row) => row._id
    },
    {
      Header: "Name",
      accessor: (row) => (
        <Link to={{ pathname: `/menu/${menuId}/${row._id}` }}>{row.name}</Link>
      )
    },
    {
      Header: "Description",
      //check current row is in hidden rows or not
      accessor: (row) => row.description
    },
    {
      Header: "Dishes",
      //check current row is in hidden rows or not
      accessor: (row) => row.dishes,
      id: "dishes",
      Cell: ({ value }) => value && Object.values(value[0]).join(", ")
    },
    {
      Header: "Show",
      accessor: (row) => (
        <Toggle
          value={selected[row._id]}
          onChange={rowSelectHandler(row._id)}
        />
      )
    }
  ];

  const initialState = {
    sortBy: [
      { desc: false, id: "id" },
      { desc: false, id: "description" }
    ],
    hiddenColumns: ["dishes", "id"]
  };
  if (menus.apply === 0) {
    setApplyStatus(true)
}
if (menus.apply === 1) {
  setApplyStatus(false)
}

  return (
    <div>
      <button type="submit" onClick={handleClick}>
        {buttonMode === "cancel" ? "Cancel" : "Apply"}
      </button>

      <Table
        data={matchData && (applyStatus ? true : i.apply !== 1)}
        columns={data}
        initialState={initialState}
        withCellBorder
        withRowBorder
        withSorting
        withPagination
        rowProps={getRowProps}
      />
    </div>
  );
}

Here my json from my api for menuId:1:

[
  // ...other menus
  {
      "_id": 3,
      "name": "Cucumber Soup ",
      "description": "Cucumber Soup",
      "dishes": [
        {
          "meat": "N/A",
          "vegetables": "cucumber"
        }
      ],
      "taste": "Medium",
      "comments": "2/4",
      "price": "Medium",
      "availability": 1,
      "trust": 1,
      "status": "Not started", 
      "apply": 0
    }
]

Please check my codeSandbox. It works fine on local json files, so you can have a better understanding regarding what I'm trying. Please see this picture for better understanding :