[SOLVED] Apollo-angular producing react dependency issue in angular 16

I am using apollo-client for angular 16.

    "@apollo/client": "^3.8.7",
    "apollo-angular": "^5.0.2",
    "graphql": "^16.8.1",

This is samople of the providers array in app.module.ts

  providers: [
    {
      provide: APOLLO_OPTIONS,
      useFactory(httpLink: HttpLink) {
        return {
          cache: new InMemoryCache(),
          link: httpLink.create({
            uri: uri,
          }),
          defaultOptions: { 
            watchQuery: {
              fetchPolicy: 'cache-and-network',
              errorPolicy: 'ignore',
            },
          }
        };
      },
      deps: [HttpLink],
    }
  ],

But I am getting this build error message.

./node_modules/@apollo/client/react/context/ApolloConsumer.js:2:0-31 - Error: Module not found: Error: Can't resolve 'react' in '/Users/admin/Desktop/Workstation/rmlDAG/rmldag-frontend/node_modules/@apollo/client/react/context'

./node_modules/@apollo/client/react/context/ApolloContext.js:1:0-31 - Error: Module not found: Error: Can't resolve 'react' in '/Users/admin/Desktop/Workstation/rmlDAG/rmldag-frontend/node_modules/@apollo/client/react/context'

./node_modules/@apollo/client/react/context/ApolloProvider.js:3:0-31 - Error: Module not found: Error: Can't resolve 'react' in '/Users/admin/Desktop/Workstation/rmlDAG/rmldag-frontend/node_modules/@apollo/client/react/context'

./node_modules/@apollo/client/react/hooks/internal/__use.js:2:0-31 - Error: Module not found: Error: Can't resolve 'react' in '/Users/admin/Desktop/Workstation/rmlDAG/rmldag-frontend/node_modules/@apollo/client/react/hooks/internal'

./node_modules/@apollo/client/react/hooks/internal/useDeepMemo.js:1:0-31 - Error: Module not found: Error: Can't resolve 'react' in '/Users/admin/Desktop/Workstation/rmlDAG/rmldag-frontend/node_modules/@apollo/client/react/hooks/internal'

./node_modules/@apollo/client/react/hooks/internal/useIsomorphicLayoutEffect.js:1:0-31 - Error: Module not found: Error: Can't resolve 'react' in '/Users/admin/Desktop/Workstation/rmlDAG/rmldag-frontend/node_modules/@apollo/client/react/hooks/internal'

./node_modules/@apollo/client/react/hooks/useApolloClient.js:2:0-31 - Error: Module not found: Error: Can't resolve 'react' in '/Users/admin/Desktop/Workstation/rmlDAG/rmldag-frontend/node_modules/@apollo/client/react/hooks'

./node_modules/@apollo/client/react/hooks/useBackgroundQuery.js:2:0-31 - Error: Module not found: Error: Can't resolve 'react' in '/Users/admin/Desktop/Workstation/rmlDAG/rmldag-frontend/node_modules/@apollo/client/react/hooks'

./node_modules/@apollo/client/react/hooks/useFragment.js:2:0-31 - Error: Module not found: Error: Can't resolve 'react' in '/Users/admin/Desktop/Workstation/rmlDAG/rmldag-frontend/node_modules/@apollo/client/react/hooks'

./node_modules/@apollo/client/react/hooks/useLazyQuery.js:2:0-31 - Error: Module not found: Error: Can't resolve 'react' in '/Users/admin/Desktop/Workstation/rmlDAG/rmldag-frontend/node_modules/@apollo/client/react/hooks'

./node_modules/@apollo/client/react/hooks/useMutation.js:2:0-31 - Error: Module not found: Error: Can't resolve 'react' in '/Users/admin/Desktop/Workstation/rmlDAG/rmldag-frontend/node_modules/@apollo/client/react/hooks'

./node_modules/@apollo/client/react/hooks/useQuery.js:3:0-31 - Error: Module not found: Error: Can't resolve 'react' in '/Users/admin/Desktop/Workstation/rmlDAG/rmldag-frontend/node_modules/@apollo/client/react/hooks'

./node_modules/@apollo/client/react/hooks/useReactiveVar.js:1:0-31 - Error: Module not found: Error: Can't resolve 'react' in '/Users/admin/Desktop/Workstation/rmlDAG/rmldag-frontend/node_modules/@apollo/client/react/hooks'

./node_modules/@apollo/client/react/hooks/useReadQuery.js:1:0-31 - Error: Module not found: Error: Can't resolve 'react' in '/Users/admin/Desktop/Workstation/rmlDAG/rmldag-frontend/node_modules/@apollo/client/react/hooks'

./node_modules/@apollo/client/react/hooks/useSubscription.js:2:0-31 - Error: Module not found: Error: Can't resolve 'react' in '/Users/admin/Desktop/Workstation/rmlDAG/rmldag-frontend/node_modules/@apollo/client/react/hooks'

./node_modules/@apollo/client/react/hooks/useSuspenseQuery.js:2:0-31 - Error: Module not found: Error: Can't resolve 'react' in '/Users/admin/Desktop/Workstation/rmlDAG/rmldag-frontend/node_modules/@apollo/client/react/hooks'

./node_modules/@apollo/client/react/hooks/useSyncExternalStore.js:2:0-31 - Error: Module not found: Error: Can't resolve 'react' in '/Users/admin/Desktop/Workstation/rmlDAG/rmldag-frontend/node_modules/@apollo/client/react/hooks'

Error: node_modules/@apollo/client/react/context/ApolloConsumer.d.ts:1:24 - error TS2307: Cannot find module 'react' or its corresponding type declarations.

1 import * as React from "react";
                         ~~~~~~~


Error: node_modules/@apollo/client/react/context/ApolloContext.d.ts:1:24 - error TS2307: Cannot find module 'react' or its corresponding type declarations.

1 import * as React from "react";
                         ~~~~~~~


Error: node_modules/@apollo/client/react/context/ApolloProvider.d.ts:1:24 - error TS2307: Cannot find module 'react' or its corresponding type declarations.

1 import * as React from "react";
                         ~~~~~~~


Error: node_modules/@apollo/client/react/ssr/RenderPromises.d.ts:1:23 - error TS2688: Cannot find type definition file for 'react'.

1 /// <reference types="react" />
                        ~~~~~


Error: node_modules/@apollo/client/react/ssr/RenderPromises.d.ts:15:62 - error TS2503: Cannot find namespace 'React'.

15     addQueryPromise(queryInstance: QueryData, finish?: () => React.ReactNode): React.ReactNode;
                                                                ~~~~~


Error: node_modules/@apollo/client/react/ssr/RenderPromises.d.ts:15:80 - error TS2503: Cannot find namespace 'React'.

15     addQueryPromise(queryInstance: QueryData, finish?: () => React.ReactNode): React.ReactNode;
                                                                                  ~~~~~


Error: node_modules/@apollo/client/react/ssr/RenderPromises.d.ts:16:131 - error TS2307: Cannot find module 'react' or its corresponding type declarations.

16     addObservableQueryPromise<TData, TVariables extends OperationVariables>(obsQuery: ObservableQuery<TData, TVariables>): import("react").ReactNode;
                                                                                                                                     ~~~~~~~


Error: node_modules/@apollo/client/react/ssr/getDataFromTree.d.ts:1:24 - error TS2307: Cannot find module 'react' or its corresponding type declarations.

1 import * as React from "react";
                         ~~~~~~~


Error: node_modules/@apollo/client/react/ssr/renderToStringWithData.d.ts:1:35 - error TS2307: Cannot find module 'react' or its corresponding type declarations.

1 import type { ReactElement } from "react";
                                    ~~~~~~~


Error: node_modules/@apollo/client/react/types/types.d.ts:1:32 - error TS2307: Cannot find module 'react' or its corresponding type declarations.

1 import type { ReactNode } from "react";
                                 ~~~~~~~


Error: node_modules/@apollo/client/react/types/types.d.ts:126:63 - error TS2503: Cannot find namespace 'JSX'.

126     children?: null | ((result: SubscriptionResult<TData>) => JSX.Element | null);
                                                                  ~~~