I have a component I am developing to retrieve logged in uses from the server. Swagger shows the server code returns correctly, but when I load the component it does not even make the fetch from the server.

Here is my code:

import React, { useState, useEffect } from 'react';
import { Loading } from '../Elements/LoadingComponent';
import DynamicTable from '../Elements/DynamicTable';
import { fetchLoggedIn, logoutUser, fetchAllUsers } from '../../network/Attendance';
import { useQuery, useMutation } from 'react-query';

const LoggedInUsers = () => {
    const [visibleUsers, setVisible] = useState([]);
    const [origUsers, setOrigUsers] = useState([]);
    const [isAdmin, setIsAdmin] = useState(false);
    const [errMess, setErrMess] = useState(null);
    //const [API] = useState(`${process.env.REACT_APP_API}/API`);
    const [btnText, setBtnText] = useState("Show All Users");
    const { data: loggedInUsers, isLoading, isError, refetch } = useQuery('loggedInUsers', fetchLoggedIn, {
        refetchInterval: 30000, // Refetch every 30 seconds
        onSuccess: (newData) => {
            var d = JSON.parse(newData)
            setVisible(d.users);

            // Fetch all users here directly and update the state
            if (origUsers.lengh === 0) {
                fetchAllUsers().then(userData => {
                    setOrigUsers(userData);

                }).catch(error => {
                    // Handle error if needed
                });
            }
        }
    });

    const loadAll = () => {
        if (btnText === "Show All Users") {
            setVisible(origUsers)
            setBtnText("Show Logged In")
        }
        else {
            setVisible(loggedInUsers);
            setBtnText("Show All Users");
        }
    }

    const filterUsers = (target, filterKey) => {
        let txt = target.value.toLowerCase();
        if (txt.length > 0) {
            let filteredUsers = origUsers.filter((user) => user.UserName.toLowerCase().startsWith(txt));
            setVisible(filteredUsers);
        }
    };

    const handleLogout = async (rowJSON, button) => {
        await logoutUser(rowJSON.UserName.toLowerCase());

        const newVisible = visibleUsers.filter((user) => user.UserName.toLowerCase() !== rowJSON.UserName.toLowerCase());
        const updatedUsers = origUsers.filter((user) => user.UserName.toLowerCase() !== rowJSON.UserName.toLowerCase());
        setVisible(newVisible);
        setOrigUsers(updatedUsers);
    };

    const buildTableData = () => {
        return [
            {
                colName: "",
                visible: false,
                filterable: false
            },
            {
                colName: "cn",
                displayName: "User",
                filterable: true,
                editable: false,
                required: false,
                visible: true,
                type: "text",
                addable: false,
                defaultVal: null
            },
            {
                colName: "samaccountname",
                displayName: "Account Name",
                editable: false,
                filterable: true,
                required: false,
                visible: true,
                type: "text",
                addable: false,
                defaultVal: null
            },
            {
                colName: "homedirectory",
                displayName: "Home Directory",
                editable: false,
                required: false,
                visible: true,
                type: "text",
                addable: false,
                defaultVal: null
            },
            {
                colName: "lastlogon",
                displayName: "Logon Time",
                editable: false,
                required: false,
                visible: true,
                type: "date",
                addable: false,
                defaultVal: null
            },
            {
                colName: "logoff",
                displayName: "Logoff Time",
                editable: false,
                required: false,
                visible: true,
                type: "date",
                addable: false,
                defaultVal: null
            },
            {
                colName: "loggedOn",
                displayName: "Currently On",
                editable: false,
                required: false,
                visible: true,
                type: "text",
                addable: false,
                defaultVal: null
            },
            {
                colName: "path",
                displayName: "path",
                editable: false,
                required: false,
                visible: true,
                type: "text",
                addable: false,
                defaultVal: null
            }
        ];
    };

    let buttons = [{ onClick: logoutUser, text: "Log Out" }];

    if (isLoading) {
        return <Loading title="Logged In Users" />;
    } else if (errMess) {
        console.log(errMess);
    } else {
        return (
            <div>

                <div className="row">
                    <div className="col-md-6 col-md-offset-3 DataBox">
                        <button text={btnText} onClick={loadAll} />
                        <DynamicTable
                            data={visibleUsers}
                            columns={buildTableData()}
                            filterFn={filterUsers}
                            border="solid 1px black"
                            title="Logged In"
                            allowAddData={false}
                            CustomRowButtons={buttons}
                        />
                    </div>
                </div>
            </div>
        );
    }
};

export default LoggedInUsers;

In createAsyncThunk.ts the error occurs at line 681:

if (!skipDispatch) {
  dispatch(finalAction)
}

skipDispatch is undefined here, but redux is not used in this component, and in other components I have used react-query on called from the same parent work correctly.

What could be causing this?