Rendering taking too much time in reactjs

I am iterating over just 100 documents on page and using a wrapper component for some conditional things.

return (
  <>
    {orders.map(({ order, ...rest }, index) => {
      return (
        <div className="booking-details" key={order.id}>
          <Grid container className="bg-dark" mt={2} alignItems="center">
            <Grid md={6} className="text-left" item>
              <Checkbox id="id1" checked={ordersToExport?.map(({ order }) => order.id).includes(order.id)} className="white" onChange={() => onClickCheckbox({ order, ...rest })} />
            </Grid>
            <Grid md={6} className="text-right" item>
              <ButtonGroup variant="text" aria-label="button group" className="white-btn-group">
                  <>
                    <ActionsAccess btnType="Accept" status={order.status}>
                      <Tooltip title="Accept" placement="top" arrow>
                        <Button size="large" onClick={() => updateOrder(order, 2)}>
                          <CheckIcon />
                        </Button>
                      </Tooltip>
                    </ActionsAccess>
                    <ActionsAccess btnType={"Accept and open document"} status={order.status}>
                      <Tooltip title="Accept and open document" placement="top" arrow>
                        <Button size="large" onClick={() => onClickAcceptOpen(order, 2)}>
                          <TaskIcon />
                        </Button>
                      </Tooltip>
                    </ActionsAccess>
                    <ActionsAccess btnType={"Accept and add note"} status={order.status}>
                      <Tooltip title="Accept and add note" placement="top" arrow>
                        <Button size="large" onClick={() => handleChange(`panel${`${index}-note`}`)}>
                          <SmsIcon />
                        </Button>
                      </Tooltip>
                    </ActionsAccess>
                    <ActionsAccess btnType={"B-Scan"} status={order.status}>
                      <Tooltip title="B-Scan" placement="top" arrow>
                        <Button size="large" onClick={() => handleChange(`panel${`${index}-bscan`}`)}>
                          <SystemUpdateAlt />
                        </Button>
                      </Tooltip>
                    </ActionsAccess>
                  </>
                <ActionsAccess btnType={"View document"} status={order.status}>
                  <Tooltip title="View document" placement="top" arrow>
                    <Button size="large" onClick={() => window.open(`/mybooking/overview-today/view-pdf?id=${order.id}`)}>
                      <DescriptionIcon />
                    </Button>
                  </Tooltip>
                </ActionsAccess>
                <ActionsAccess btnType={"Delete order"} status={order.status}>
                  <Tooltip title="Delete order" placement="top" arrow onClick={() => handleChange(`panel${`${index}-delete`}`)}>
                    <Button size="large">
                      <DeleteIcon />
                    </Button>
                  </Tooltip>
                </ActionsAccess>
                  <ActionsAccess btnType={"Reject order"} status={order.status}>
                    <Tooltip title="Reject order" placement="top" arrow onClick={() => handleChange(`panel${`${index}-reason`}`)}>
                      <Button size="large">
                        <CancelIcon />
                      </Button>
                    </Tooltip>
                  </ActionsAccess>
                <ActionsAccess btnType={"View tracking"} status={order.status}>
                  <Tooltip title="View tracking" placement="top" arrow>
                    <Button
                      size="large"
                      onClick={() => {
                        navigate(`/event-tracking?id=${order.id}`);
                        setCount(count + 1);
                      }}
                    >
                      <ZoomInIcon />
                    </Button>
                  </Tooltip>
                </ActionsAccess>
                <ActionsAccess btnType="Quick edit" status={order.status}>
                  <Tooltip title="Quick edit" placement="top" arrow>
                    <Button size="large" onClick={() => onClickQuickEdit({ order, ...rest })}>
                      <FlashOnIcon />
                    </Button>
                  </Tooltip>
                </ActionsAccess>
                  <ActionsAccess btnType={"Modify order"} status={order.status}>
                    <Tooltip title="Modify order" placement="top" arrow>
                      <Button size="large" onClick={() => navigate(`/edit-order?id=${order.id}`)}>
                        <EditIcon />
                      </Button>
                    </Tooltip>
                  </ActionsAccess>
              </ButtonGroup>
            </Grid>
          </Grid>
        </div>
      );
    })}
  </>
);

Now I am not able to understand why it is taking too much time to check the checkBox on I click. Shouldn't I use wrapper component here? and go with the just conditional rendering inside the component (which looks code ugly unreadable)

Here is my ActionAccess component.

const enums: Enums = {
  1: [
    "Accept",
    "Accept and open document",
    "Accept and add note",
    "View document",
    "Delete order",
    "Reject order",
    "View tracking",
    "Modify order",
  ],
  2: ["View document", "Delete order", "Reject order", "View tracking"],
  3: ["View document", "Delete order", "View tracking"],
  4: ["View document", "Delete order", "View tracking", "Modify order", "Quick edit"],
  8: ["View document", "Delete order", "View tracking", "Modify order", "Quick edit"],
  5: ["View document", "View tracking"],
  9: ["View document", "Delete order", "View tracking", "Modify order"]
};

export default function ActionsAccess({ children, status, btnType }: props) {
  const feature = enums[status];
  return feature?.indexOf(btnType) !== -1 ? children : null;
}

from Rendering taking too much time in reactjs