I've defined "use client"; but its still throwing a tantrum. I've moded "use client" even before export default function Home() { but it still causes this error

Error:

./src\app\page.js
ReactServerComponentsError:

You're importing a component that needs useState. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.
Learn more: https://nextjs.org/docs/getting-started/react-essentials

   ╭─[C:\Users\ewen2\OneDrive\Documents\GitHub\Opal-Client\src\app\page.js:1:1]
 1 │ import { useEffect, useState } from 'react';
   ·                     ────────
 2 │ import Image from 'next/image';
 3 │ import Cookies from 'js-cookie';
 4 │ import styles from './css/page.module.css';
   ╰────

Maybe one of these should be marked as a client entry with "use client":
  ./src\app\page.js

import { useEffect, useState } from 'react';
import Image from 'next/image';
import Cookies from 'js-cookie';
import styles from './css/page.module.css';
import loadingStyles from './css/loading.module.css';

export default function Home() {
  "use client";
  const [isLoading, setIsLoading] = useState(true);
  const [isAuthenticated, setIsAuthenticated] = useState(false);

  useEffect(() => {
    setTimeout(() => {
      const userId = Cookies.get('user_id');
      if (userId) {
         // setIsAuthenticated(true);
      }
      setIsLoading(false);
    }, 50000);
  }, []);

  return (
    <>
      {isLoading ? (
        <div className={loadingStyles.loadingScreen}>
          <span className={loadingStyles.loadingText}>Opal Client</span>
          <Image src="/logo.png" alt="Logo" width={100} height={100} />
        </div>
      ) : (
        isAuthenticated ? (
          <div>
            Dashboard
          </div>
        ) : (
          <main className={styles.main}>
            <div>
              Login Page
            </div>
          </main>
        )
      )}
    </>
  );
}