GraphQL Code Generator with Apollo Client query with fragment type not detected

I have a simple Todo component that pulls all todos from my GraphQL endpoint.

I am testing the fragment functionality using Apollo Client and GraphQL Code Generator to generate my types.

Everything works, however the types for the fragment don’t (the data is there and displays correctly on the page). Below is the code for the todo list component:

"use client";

import { graphql } from "@/gql";
import { useSuspenseQuery } from "@apollo/experimental-nextjs-app-support/ssr";

const query = graphql(`
  query getAllTodos {
    todos {
      id
      ...TodoPart
    }
  }
`);

export default function TodoList() {
  const { data } = useSuspenseQuery(query, {
    context: { fetchOptions: { cache: "no-cache" } },
  });

  return data.todos.map((todo) => <p key={todo.id}>{todo.text}</p>);
}

The type error appears on {todo.text}. When I hover over text however, I can see the type has been generated for the fragment, am I trying to use this incorrectly as it seems to have generated successfully? The error when hovering is below:

Property 'text' does not exist on type '{ __typename?: "Todo" | undefined; id: string; } & { ' $fragmentRefs'?: { TodoPartFragment: TodoPartFragment; } | undefined; }'

TodoPartFragment type generated is defined in the graphql.ts file as follows

export type TodoPartFragment = { __typename?: 'Todo', text: string, done: boolean } & { ' $fragmentName'?: 'TodoPartFragment' };

and finally, here is my .graphql file containing the TodoPart fragment

fragment TodoPart on Todo {
  text
  done
}

Thanks