Context is not accessible in function component – React

I have this page:

'use client';
import { useSearchParams } from 'next/navigation';

import StravaConnection from '@/features/editor/strava-connection';

const EditorProjectIdPage = () => {
  const params = useSearchParams();
  const authToken = params.get('code');

  useEffect( () => {
      console.log("----------------");
      StravaConnection(authToken!);
  }, []);
  redirect("/editor");
};

export default EditorProjectIdPage;

The StravaConnection file looks like this:

'use client';

import { useAuth } from '../../context/AuthContext';

import useSWR from "swr";

const StravaConnection = async (authToken: String) => {
  const { setTokens } = useAuth();

  const fetcher = (url) => fetch(url, { method: "POST" }).then((res) => res.json());

  const { data, error, isLoading } = useSWR(
    "https://www.example.com/oauth/token?client_id=123456&client_secret=abc&code=${authToken}&grant_type=authorization_code",
    fetcher
  );

  console.log(data);
  setTokens(data['access_token']);

  return (
    <div>
      Connecting to Strava...
    </div>
  );
};

export default StravaConnection;

The access token should be returned in the api call. This access token should be stored in the AuthContext using the useAuth method. However, the following error is shown in the console after the “————” has been logged:

Error: 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

I do not get what I did wrong here. I suppose the error is about the useAuth and useSWR methods in the StravaConnection file, but that one is inside the body of a function component.