Apollo Dev Tools Chrome extension will not detect the apollo client

I am using apollo client in a react app with next.js

Here is the client code, no matter what I do, my app that is running in localhost will not be able to connect to the extension. Please help
```ts
// import * as React from 'react';
// import Container from '@mui/material/Container';
// import Typography from '@mui/material/Typography';
// import Box from '@mui/material/Box';
// import Button from '@mui/material/Button';
// import NextLink from 'next/link';
// import ProTip from '@/components/ProTip';
// import Copyright from '@/components/Copyright';

// export default function About() {
// return (
//
//
//
// Material UI - Next.js example in TypeScript
//
//
//
// Go to the home page
//
//
//
//
//
//
// );
// }
import * as React from 'react';
// import { fetchGraphQL } from '@/lib/apollo-client';
import fetch from 'cross-fetch';
import Typography from '@mui/material/Typography';
import { ApolloClient, HttpLink, InMemoryCache, gql } from '@apollo/client';

// Extend the Window interface to include __APOLLO_CLIENT__
declare global {
interface Window {
__APOLLO_CLIENT__?: ApolloClient;
}
}

// HELLO_QUERY will be constructed inside the HomePage function

type PageProps = {
params: { username: string };
searchParams: { [key: string]: string | string[] | undefined };
};

function getApolloClient() {
return new ApolloClient({
ssrMode: true,
link: new HttpLink({
uri: 'http://localhost:4001', // Replace with your endpoint
fetch,
}),
cache: new InMemoryCache(),
defaultOptions: {
watchQuery: {
fetchPolicy: 'cache-and-network',
},
},
connectToDevTools: true, // Enable Apollo Client DevTools
});
}

export default async function HomePage({ params, searchParams }: PageProps) {
const { id } = await searchParams;
const { username } = await params;

const graphqlQuery = gql`
query($objectId: String!) {
object(id: $objectId) {
id
name
data
}
}`;
const client = getApolloClient();

if (typeof window !== 'undefined') {
window.__APOLLO_CLIENT__ = client;
}

const { data } = await client.query({
query: graphqlQuery,
variables: { objectId: id }
});

return (

### Apollo Client Devtools version
4.18.15 (Chrome)

Start by reproducing the provided TypeScript React app with Next.js and Apollo Client, using the shown client setup and the reported DevTools version. Investigate why the Chrome extension does not detect the client; done means the local app's Apollo client is detected by Apollo DevTools.

Written by the indexing model from the issue text.