How to delete Material UI Checkbox and Card after 1 second delay on change (i.e. on check) of Checkbox?

Currently have a NowView component composed in part by a List component (of Cards with adjacent MUI Checkboxes)

import React, { useState, useEffect } from "react";
import Grid from "@material-ui/core/Grid";
import CreateBlankDialog from "../../components/action/CreateBlankDialog";
import List from "../../components/action/List";
import { useApp } from "../../AppProvider";
import styles from "./index.css";

const NowView = () => {
  const { useAction } = useApp();
  const { create,
  } = useAction;

  const [open, setOpen] = useState(false);

  return (
    <div className="now-view-main">
      <Grid item>
        <button
          color="primary"
          className="button"
          onClick={() => setOpen(true)}
        >
          Create New!
        </button>
        <CreateBlankDialog
          open={open}
          setOpen={setOpen}
          onSubmit={async (validity, values) => create(validity, values)}
        />
        <List/>
      </Grid>
    </div>
  );
};

export default NowView;

The List component which has the Cards and MUI Checkboxes I want to delete (after 2 sec) is:

import React, { useEffect } from "react";
import ActionDetailsCard from "../ActionDetailsCard";
import styles from "./index.css";
import { Checkbox } from "@material-ui/core";
import { useApp } from "../../../AppProvider";

const List = ({}) => {
  const { useAction } = useApp();
  const { getAll, action, actions, setAction, updateById } = useAction;

  useEffect(() => {
    getAll();
  }, []);

  const handleCheck = (d) => {
    setAction(d);
    let values = { complete: true };
    updateById(d._id, values);
  };

  return (
    actions.length && (
      <ul>
        {actions.map((d) => {
          return (
            <div key={d._id} className={"action-card-container"}>
              {action && d._id === action._id ? (
                <Checkbox checked={true} onChange={() => handleCheck(d)} />
              ) : (
                <Checkbox checked={false} onChange={() => handleCheck(d)} />
              )}
              <ActionDetailsCard data={d} select={setAction} />
            </div>
          );
        })}
      </ul>
    )
  );
};

export default List;

Relevant section of useAction custom hook (imported into List) :

import React from "react";
import baseUrl from "./baseUrl";
import { useState } from "react";

export default function useAction() {
  const [action, setAction] = useState({});
  const [actions, setActions] = useState([]);
  const [err, setErr] = useState(null);

  //Get list of all actions
  const getAll = async () => {
    try {
      const response = await fetch(`${baseUrl}/actions`);
      const data = await response.json();
      setActions(data);
    } catch (err) {
      setErr(err);
    }
  };

  const updateById = async (id, values) => {
    try {
      await fetch(`${baseUrl}/actions/${id}`, {
        method: "PATCH",
        headers: {
          "Access-Control-Allow-Origin": "*",
          "Content-Type": "application/json",
        },
        body: JSON.stringify(values),
      });
      values["complete"] &&
        setActions((actions) => [...actions.filter((item) => item._id !== id)]);
    } catch (err) {
      setErr(err);
    }
  };


  return {
    actions: actions,
    action: action,
    setActions,
    setAction,
    updateById,
    getAll
  };
}

Current Behavior: On click of a Checkbox, instantly removes both the Checkbox and the adjacent Card from the List. However *the MUI Checkbox checkmark never shows, not even for a split second.

Helpful info: whether a MUI Checkbox shows the checkmark or not depends on the prop checked={bool}.

Checkboxes are mapped (and checked prop is determined) in List like so:

{actions.map((d) => {
          return (
            <div key={d._id} className={"action-card-container"}>
              {action && d._id === action._id ? (
                <Checkbox checked={true} onChange={() => handleCheck(d)} />
              ) : (
                <Checkbox checked={false} onChange={() => handleCheck(d)} />
              )}

Previous unsuccessful attempts:

(1) having a checkboxRef and updating styles in handleCheck (refs cannot update prop values)

(2) Using setTimeout with 3s delay inside handleCheck and manipulating ref inside there

(3) In List initialize state array of checkedItems and having an isChecked function that is called inside map block and repeatedly sets value of checked based on return value of isChecked(d).

Screenshot of NowView w/Checkboxes: