graphql – How to get fields of the particular item outside the home in the Layout.tsx in xm cloud

I have a Layout.tsx file where I can the get fields of the context item as:

const Layout = ({ layoutData }: LayoutProps): JSX.Element => {
  const { route, context: sitecoreContext } = layoutData.sitecore;
  const fields = route?.fields as RouteFields;

I have created an item GlobalScriptsSetting under the /sitecore/content/MySiteCollection/MySite/Settings and want to access the fields of this item in the Layout.tsx only.

I tried to use the following way using graphql

import { GraphQLRequestClient } from '@sitecore-jss/sitecore-jss-nextjs';

const client = new GraphQLRequestClient('https://your-xmcloud-endpoint/api/graphql', {
  apiKey: 'YOUR_API_KEY',
});

const GET_GLOBAL_SETTINGS_QUERY = `
{
  item(path: "/sitecore/content/my-tenant/my-site/GlobalSettings") {
    field(name: "EnableFeature") {
      value
    }
  }
}
`;

useEffect(() => {
    const fetchGlobalSettings = async () => {
      try {
        const response = await graphQLClient.request(GET_GLOBAL_SETTINGS_QUERY);
        console.log('GraphQL Response:', response); // Debugging Output
        console.log(response?.item?.field) 
      } catch (error) {
        console.error('Error fetching global settings:', error);
      }
    };

but it gives me the error as:

graphql_request__WEBPACK_IMPORTED_MODULE_0__.GraphQLClient is not a constructor

Please suggest a way how to achieve this in xm cloud with next js. I could have done this in MVC using GetItem method but not sure in xm cloud with next js.