How do I create an access token with anonymous authentication with MongoDB realm GraphQL API?

Question

I'm new to MongoDB, and I have been loitering on their docs for...an embarrassingly long time.

I keep getting this error: Uncaught TypeError: Cannot read properties of null (reading '_accessToken') somewhere between my AnonProvider element and my bearer authentication.

AnonProvider element:

import { createContext, useState } from "react";
import { App, Credentials } from "realm-web";
import { APP_ID } from "../realm/constants";

// Creating a Realm App Instance
const app = new App(APP_ID);

// Creating a user context to manage and access all the user related functions
// across different component and pages.
export const AnonUserContext = createContext();

export const AnonProvider = ({ children }) => {
    const [anonUser, setAnonUser] = useState(null);

    const anonAuth = async () => {
            const credentials = Credentials.anonymous();
            const authedUser = await app.logIn(credentials);
            setAnonUser(authedUser);
            return authedUser;
    };

    return <AnonUserContext.Provider value={{ anonUser, setAnonUser, anonAuth }}>
     {children}
    </AnonUserContext.Provider>;
}

Bearer authentication:

import { useContext, useEffect, useState } from 'react';
import request, { gql } from 'graphql-request';
import PageContainer from "../components/PageContainer.component";
import { AnonUserContext } from "../contexts/anonuser.context";
import { GRAPHQL_ENDPOINT } from "../realm/constants";
import ImageCard from '../components/ImageCard.component';

const AnonymousImages = () => {
  const { anonUser } = useContext(AnonUserContext);

  const [images, setImages] = useState([]);

  // GraphQL query to load images
  const getImagesQuery = gql`
  query getImages {
    pictures {
      _id
      assetName
      imageUrl
    }
  }
  `;

  // empty query
  const queryVariables = {};
  const headers = { Authorization: `Bearer ${anonUser._accessToken}` }

How do I create an access token from anonymous credentials?

I replaced a tutorial code's email login function with the MongoDB docs' example of anonymous authentication. I tried using

// Gets a valid user access token to authenticate requests
async function getValidAccessToken(user) {
  // An already logged in user's access token might be stale. To
  // guarantee that the token is valid, refresh it if necessary.
  await user.refreshCustomData();
  return user.accessToken;
}

and the same Uncaught TypeError: Cannot read properties of null (reading '_accessToken') error appeared.