Response data is different from the one sent from the graphql server

Question

Response data is different from the one sent from the graphql server.

Category page

class Category extends React.Component{

    state = {
        data: null,
        error: false,
    }

    async componentDidMount() {
        const { category } = this.props.params

         try {
            const { data } = await client.query({
                query: categoryQuery,
                variables: {
                title: category
               }
            })
            console.log(data)
            this.setState({ data: data.category })

        } catch (err) {
            this.setState({ error: true })
        }

    }

}

Here's what categoryQuery looks like >

export const categoryQuery = gql`
query CATEGORIES($title: String!) {
  category(input: { title: $title }) {
    name
    products {
      id
      name
      inStock
      gallery
      brand
      attributes {
        id
        name
        type
        items {
          displayValue
          value
          id
        }
      }
      prices {
        amount
        currency {
          symbol
          label
        }
      }
    }
  }
}
`;

The response object looks like this >

{
 "category": {
   "name":"all",
   "products":[...]
 }
}

When I did console.log(data) in Category Page when componentDidMount it logs the following object. Every product's data is correct but the product of id "apple-imac-2021" is getting the wrong attribute. The server is sending the following attribute

"attributes": [
      {
        "id": "Capacity",
        "name": "Capacity",
        "type": "text",
        "items": [
          {
            "displayValue": "256G",
            "value": "256G",
            "id": "256G"
          },
          {
            "displayValue": "512G",
            "value": "512G",
            "id": "512G"
          }
        ]
      }
    ],

But I am receiving the wrong attributes. You can look at attributes items. They are different.

{
"category": {
   "name": "all",
   "products": [
    .....,
      {
        "id": "apple-imac-2021",
        ......
        "attributes": [
          {
            "id": "Capacity",
            "name": "Capacity",
            "type": "text",
            "items": [
              {
                "displayValue": "512G",
                "value": "512G",
                "id": "512G"
              },
              {
                "displayValue": "1T",
                "value": "1T",
                "id": "1T"
              }
            ]
          }
        ],
    
      },...
    ]
  }
}

But when I go to the Network tab and see the response object everything is right, I am getting the right attributes. What might be the problem?