useLazyquery variables lagging behind one step

I am using useLazyQuery to get data based on primary_key (ID), which is passed to the query as variable. However, what I found is, the value that gets passed to the variable is from the previous call. (During first call nothing gets passes in variables, in second call, the value that was supposed to get passed in first call gets passes, etc...). I have tried to reproduce the phenomena using a sample GraphQL playground - https://graphqlzero.almansi.me/api) as below. Here when I click on button 'One' it is supposed to fetch post data for post id 1. For example, if I click on button 2 next, it gets data for ID 1 and so forth. It is always lagging behind 1 step. Can anybody please help figuring out what is happening here:

App.js

import './App.css'
import { gql, useLazyQuery } from "@apollo/client";

const App = () => {
  const GET_DATA = gql`
    query GetData($index: ID!) {
      post(id: $index) {
        id
        title
        body
      }
    }
  `;

  const [loadChartData, { data, variables }] =
    useLazyQuery(GET_DATA, { fetchPolicy: "network-only" });

  return (
    <div className="App">
        <button
          onClick={async () => {
            console.log("Clicked: ", 1);
            await loadChartData({ variables: {"index": 1 } });
            console.log("data: ", data, variables);
          }}
        >
          One
        </button>
        <button
          onClick={async () => {
            console.log("Clicked: ", 2);
            await loadChartData({ variables: {"index": 2 } });
            console.log("data: ", data, variables);
          }}
        >
          Two
        </button>
        <button
          onClick={async () => {
            console.log("Clicked: ", 3);
            await loadChartData({ variables: {"index": 3 } });
            console.log("data: ", data, variables);
          }}
        >
          Three
        </button>
      </div>
  );
};

export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

import {
  ApolloClient,
  InMemoryCache,
  ApolloProvider,
  HttpLink,
} from "@apollo/client";

const client = new ApolloClient({
  link: new HttpLink({
    uri: 'https://graphqlzero.almansi.me/api',
    headers: {
      "Content-Type": "application/json"
    }
  }),
  cache: new InMemoryCache(),
});

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <ApolloProvider client={client}>
      <App />
    </ApolloProvider>
);