I am trying to just use graphcms for my image assets and load them into my Next JS (v12.0.1) frontend. However, it is just throwing this hostname not configured in next.config.js error even though I have already specified it in my next.config.js file as follows.

module.exports = {
  images: {
    domains: ['media.graphcms.com','media.graphassets.com'],
  }
};

I am loading it into a component with this query using @apollo/client :

import Page from '@components/page';
import TeamMembersGrid from '@components/team-members-grid';
import Layout from '@components/layout';
import Header from '@components/header';

import { META_DESCRIPTION } from '@lib/constants';
import { gql, useQuery } from '@apollo/client';

const TEAM_MEMBERS = gql`
query TeamMember {
  teamMembers {
    phoneNumber
    name
    id
    emailAddress
    subsystem
    role
    experienceLevel
    profileImage {
      url
    }
  }
}
`;

const TeamMembers = () => {
  const { data } =useQuery(TEAM_MEMBERS);
  const team = data?.teamMembers
  const meta = {
    title: 'Raftar Formula Racing',
    description: META_DESCRIPTION
  };

  return (
    <Page meta={meta}>
      <Layout>
        <Header hero="The Crew" description={meta.description} />
        {team && <TeamMembersGrid teamMembers={team}/>}
      </Layout>
    </Page>
  );
}

export default TeamMembers

Can someone please tell me what exactly is failing here ?