Checkboxes in dynamic Table

[BhaskarWunnava]

Hi,
I am building an app to display users in Dynamic table with checkbox for selection of each user.

everything is working fine as per my requirement but only challenge which i am facing is checkbox is not getting checked when i select the user.

below is the code for my Allusers.jsx

import React, { useEffect, useState, useCallback } from "react";
import { Checkbox, Stack, Inline, Text } from "@forge/react";
import { DTable, ButtonDanger, ButtonPrimary } from "./Components";
import { deleteUsers, getOrgUsers } from "./apiCalls";
import { sUserHead } from "./Heads";
import ModelForm from "./ModalForm";

export const AllUsers = () => {
  const [iUserRows, setIUserRows] = useState([]);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [isDisabled, setIsDisabled] = useState(true);
  const [isLoading, setIsLoading] = useState(false);
  const [dUserList, setDUserList] = useState([]);
  const [checkedUsers, setCheckedUsers] = useState({});

  const openModal = () => setIsModalOpen(true);
  const closeModal = () => setIsModalOpen(false);

  const deleteUser = useCallback(() => {
    if (dUserList.length > 0) {
      deleteUsers(dUserList).then((response) => {
        console.log(`delResp:${JSON.stringify(response)}`);
        if (response?.success) {
          setDUserList([]);
          setCheckedUsers({});
          fetchUsers(); // Refetch users to reset state after deletion
        }
      });
    }
  }, [dUserList]);

  const onCheckChange = (e) => {
    const { checked, value } = e.target;

    setDUserList((prevList) => {
      const isSelected = prevList.some((user) => user.accountId === value);

      const updatedList = isSelected
        ? prevList.filter((user) => user.accountId !== value)
        : [...prevList, { accountId: value }];

      setIsDisabled(updatedList.length === 0);
      console.info(`uList: ${JSON.stringify(updatedList)}`);

      return updatedList;
    });
    setCheckedUsers((prevCheckedUsers) => ({
      ...prevCheckedUsers,
      [value]: checked,
    }));
  };

  const fetchUsers = useCallback(() => {
    setIsLoading(true);
    getOrgUsers().then((users) => {
      if (users) {
        const userRows = users.map((user, index) => ({
          key: `${user.name}-user-${index}`,
          cells: [
            {
              key: `${user.name}-${index}`,
              content: (
                <Checkbox
                  value={user.accountId}
                  label={user.name}
                  defaultChecked={false}
                  checked={!!checkedUsers[user.accountId]}
                  onChange={onCheckChange}
                />
              ),
            },
            {
              key: `${user.email}-${index}`,
              content: <Text>{user.email}</Text>,
            },
            {
              key: `${user.isManaged}-${index}`,
              content: <Text>{user.isManaged}</Text>,
            },
            {
              key: `${user.last_active}-${index}`,
              content: <Text>{user.last_active}</Text>,
            },
            {
              key: `${user.status}-${index}`,
              content: <Text>{user.status}</Text>,
            },
            {
              key: `${user.activeDays}-${index}`,
              content: <Text>{user.activeDays}</Text>,
            },
          ],
        }));
        setIUserRows(userRows);
      }
      setIsLoading(false);
    });
  }, [checkedUsers]);

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

  return (
    <Stack>
      <DTable
        head={sUserHead}
        rows={iUserRows || "Loading...."}
        rowsPerPage={10}
        isLoading={isLoading}
        totalCount={iUserRows.length}
        type="Users"
        defaultSortKey="name"
      />
      <Inline space="space.100">
        <ButtonDanger
          text="Delete"
          iconBefore="trash"
          onClick={deleteUser}
          isDisabled={isDisabled}
        />
        {/* <ButtonPrimary
          text="Change Email"
          iconBefore="file"
          onClick={openModal}
          isDisabled={isDisabled}
        /> */}
      </Inline>
      {isModalOpen && <ModelForm onClose={closeModal} userData={dUserList} />}
    </Stack>
  );
};

note sure where i am making mistake. i am struggling to resolve this since long time.
any help is much appreciated.

below is the output which i am getting

Thanks & Regards
Bhaskar