Error on "typescript-react-apollo" plugin + vite: [vite] Named export 'gql' not found. The requested module '@apollo/client' is a CommonJS module, which may not support all module.exports as named exports

### Which packages are impacted by your issue?

_No response_

### Describe the bug

The generated schema.ts file starts with
```
import { gql } from "@apollo/client";
import * as Apollo from "@apollo/client";
```
It causes the following error:
```
[vite] Named export 'gql' not found. The requested module '@apollo/client' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from '@apollo/client';
const {gql} = pkg;
```

the workaround is just adding `/index` to the above url.
mycode gen config is:
```
const config: CodegenConfig = {
schema: "graphql/schema.graphql",
documents: ["app/**/*.graphql", "app/**/*.gql"], //try to find these files and generate the following based on them
generates: {
"./app/@types/graphql/schema.ts": {
plugins: [
"typescript",
"typescript-operations",
"typescript-react-apollo",
],
config: {
withHooks: true,
// useTypeImports: true,
// emitLegacyCommonJSImports: true,
},
},
},
```
(note: uncommenting the above lines didn't change the output)

### Your Example Website or App

https://stackblitz.com/edit/github-rpu4tw?file=package.json,codegen.ts

### Steps to Reproduce the Bug or Issue

just run the codegen in with Remix + Vite template

### Expected behavior

import { gql } from "@apollo/client/index";
import * as Apollo from "@apollo/client/index";

### Screenshots or Videos

_No response_

### Platform

- OS: macOS
- NodeJS: v21.7.3
- `graphql` version: [e.g. 16.3.0]
"@graphql-codegen/cli": "5.0.2",
"@graphql-codegen/client-preset": "4.2.5",
"@graphql-codegen/schema-ast": "^4.0.2",
"@graphql-codegen/typescript-react-apollo": "^4.3.0",

### Codegen Config File

import dotenv from "dotenv";
import { type CodegenConfig } from "@graphql-codegen/cli";

dotenv.config();

const config: CodegenConfig = {
schema: "graphql/schema.graphql",
documents: ["app/**/*.graphql", "app/**/*.gql"], //try to find these files and generate the following based on them
generates: {
"./app/@types/graphql/schema.ts": {
//preset: "client", //we don't need gql version
plugins: [
"typescript",
"typescript-operations",
"typescript-react-apollo", //help on this plugin: https://the-guild.dev/graphql/codegen/plugins/typescript/typescript-react-apollo
],
config: {
withHooks: true,
// useTypeImports: true,
// emitLegacyCommonJSImports: true,

skipTypename: true,
},
},
},
};

export default config;

### Additional context

_No response_