UseContext error when calling useSWR

[weehong]

Hello everyone.

I am using NextJs with SWR for my project.
Whenever I tried to call the useSWR hooks, I will receive the following error message.

Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
TypeError: Cannot read properties of null (reading 'useContext')

I have no idea how is this error actually happens.
The following is the exact code in the project.

// index.tsx
export default function Home({
  user,
  games,
}: {
  user: UserContext & UserProps;
  games: Game[];
}): JSX.Element {
  const { data, error } = useSWR("api/game", fetcher);

  return (
    <>
      <Layout user={user} />
      <Container>
        <div className="flex justify-end mb-5">
          <Link href="/games/create">
            <a
              type="button"
              className="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
            >
              Host Game
            </a>
          </Link>
        </div>
        <Card games={games} user={user} />
      </Container>
    </>
  );
}

can anyone shed some light please.