Are graphql codegen types correct

I’m trying to create a simple next app with typescript using Strapi as a headless CMS.

I just want to use Strapi and graphql with typescript to show something in the next app.

In Strapi I simply have a Color Content type with two colors, red and blue

I have graphql set up in Strapi and in the playground this works

query ColorData{
  colors{
    data{
      attributes{
        color_name
      }
    }
  }
}

and this outputs

{
  "data": {
    "colors": {
      "data": [
        {
          "attributes": {
            "color_name": "Red"
          }
        },
        {
          "attributes": {
            "color_name": "Blue"
          }
        }
      ]
    }
  }
}

In the next app I’m using graphql codegen to generate the types

import type { CodegenConfig } from '@graphql-codegen/cli';

const config: CodegenConfig = {
  overwrite: true,
  schema: "https://0.0.0.0:1337/graphql",
  documents: "graphql/**/*.ts",
  generates: {
    "./src/__generated__/": {
      preset: "client",
      plugins: []
    }
  }
};

export default config

The types it outputs relating to colors are

export type Color = {
  __typename?: 'Color';
  color_name?: Maybe<Scalars['String']['output']>;
  createdAt?: Maybe<Scalars['DateTime']['output']>;
  publishedAt?: Maybe<Scalars['DateTime']['output']>;
  updatedAt?: Maybe<Scalars['DateTime']['output']>;
};

export type ColorEntity = {
  __typename?: 'ColorEntity';
  attributes?: Maybe<Color>;
  id?: Maybe<Scalars['ID']['output']>;
};

export type ColorEntityResponse = {
  __typename?: 'ColorEntityResponse';
  data?: Maybe<ColorEntity>;
};

export type ColorEntityResponseCollection = {
  __typename?: 'ColorEntityResponseCollection';
  data: Array<ColorEntity>;
  meta: ResponseCollectionMeta;
};

export type ColorFiltersInput = {
  and?: InputMaybe<Array<InputMaybe<ColorFiltersInput>>>;
  color_name?: InputMaybe<StringFilterInput>;
  createdAt?: InputMaybe<DateTimeFilterInput>;
  id?: InputMaybe<IdFilterInput>;
  not?: InputMaybe<ColorFiltersInput>;
  or?: InputMaybe<Array<InputMaybe<ColorFiltersInput>>>;
  publishedAt?: InputMaybe<DateTimeFilterInput>;
  updatedAt?: InputMaybe<DateTimeFilterInput>;
};

export type ColorInput = {
  color_name?: InputMaybe<Scalars['String']['input']>;
  publishedAt?: InputMaybe<Scalars['DateTime']['input']>;
};

but if I try to use this in the next app the type don’t seem to work with the data form the query.

'use client'
import { COLOR_DATA} from '@/graphql/queries'
import { Color, ColorEntityResponse, ColorEntityResponseCollection } from '@/src/__generated__/graphql'
import { useQuery } from '@apollo/client'

const Home = () => {

  const {data, loading} = useQuery<ColorEntityResponseCollection, ColorEntityResponse>(COLOR_DATA)

  if(loading || !data) return <div>Loading</div>

  console.log(data)

  return (
    <div>
      <ul>
        {data.data.map((color:Color) => {
          <li>{color.color_name}</li>
        })}
      </ul>
    </div>
  );
}

export default Home;    

If I remove the types

<ColorEntityResponseCollection, ColorEntityResponse> 

the console works but with the types it just shows loading.

Is there something I am doing wrong with the codegen ?