reactjs – Graphql endpoint data displaying __typename in React using Typescript

I am trying to display data from a Graphql endpoint in React (Next.js) using Typescript.
The data is displaying “__typename” field along with other fields . How do I get rid of __typename .

Component .tsx

import { useQuery } from '@apollo/client';
import { gql } from '@apollo/client';

const GET_ITEMS = gql`
query Query  {
    countries {
        code
        name
        emoji
      }
  }`;

function ItemList() {
  const { loading, error, data } = useQuery(GET_ITEMS);
// loading as boolean 
  if (loading) return <p>Loading...</p>;
// if have error that 'll get populated as message 
  if (error) return <p>Error: {error.message}</p>;  
  return (
    <div>
    {JSON.stringify(data)}
    </div> 
  );
}

export default ItemList;
Apollo CLient 
import { ApolloClient, InMemoryCache } from '@apollo/client';

const client = new ApolloClient({
  uri: 'https://countries.trevorblades.com/graphql', // Replace with your API URL
  cache: new InMemoryCache(),
});

export default client;

Page rendered as :

{"countries":[{"__typename":"Country","code":"AD","name":"Andorra","emoji":"????????"},{"__typename":"Country","code":"AE","name":"United Arab Emirates","emoji":"????????"},{"__typename":"Country","code":"AF","name":"Afghanistan","emoji":"????????"},{"__typename":"Country","code":"AG","name":"Antigua and Barbuda","emoji":"????????"},{"__typename":"Country","code":"AI","name":"Anguilla","emoji":"????????"},