Next JS 14 Suspense Component Not Rendering Fallback

Question

I have suspense working for other components, however this one component it's not showing anything while the client component is loading its values. The table just appears when loading is complete.

I did check https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations but didn't identify the cause/resolution.

In the page.tsx (server)

<h2>Last Logged In</h2>
<Suspense fallback={<TableSkeleton />}>
    <LastLoggedInList />
</Suspense>

The TableSkeleton component works fine, I have tested that separately.

And this is the LastLoggedInList component

'use client';
// Imports here...

const LastLoggedInList = () => {
const [users, setUsers] = useState(null);
const router = useRouter();

useEffect(() => {
    const updateUsers = async () => {
        const latestLoggedInUsers = await getLatestLoggedInUsers();
        setUsers(latestLoggedInUsers);

        function delay(ms) {
            return new Promise(resolve => setTimeout(resolve, ms));
        }

        await delay(5000);
    };
    updateUsers();
}, []);

return (
    <>
        {users && (
            <Table
                aria-label="Last LoggedIn Users Table"
                onRowAction={
                etc....