diff --git a/.api-reports/api-report-react_components.md b/.api-reports/api-report-react_components.md
index bfb472ede13..ab9ab7432fb 100644
--- a/.api-reports/api-report-react_components.md
+++ b/.api-reports/api-report-react_components.md
@@ -4,8 +4,6 @@
 
 ```ts
 
-/// <reference types="react" />
-
 import type { ASTNode } from 'graphql';
 import type { DocumentNode } from 'graphql';
 import type { ExecutionResult } from 'graphql';
@@ -16,6 +14,7 @@ import type { GraphQLErrorExtensions } from 'graphql';
 import { Observable } from 'zen-observable-ts';
 import type { Observer } from 'zen-observable-ts';
 import * as PropTypes from 'prop-types';
+import type * as ReactTypes from 'react';
 import type { Subscriber } from 'zen-observable-ts';
 import type { Subscription as Subscription_2 } from 'zen-observable-ts';
 import { TypedDocumentNode } from '@graphql-typed-document-node/core';
@@ -915,7 +914,7 @@ type Modifiers<T extends Record<string, any> = Record<string, unknown>> = Partia
 }>;
 
 // @public (undocumented)
-export function Mutation<TData = any, TVariables = OperationVariables>(props: MutationComponentOptions<TData, TVariables>): JSX.Element | null;
+export function Mutation<TData = any, TVariables = OperationVariables>(props: MutationComponentOptions<TData, TVariables>): ReactTypes.JSX.Element | null;
 
 // @public (undocumented)
 export namespace Mutation {
@@ -967,7 +966,7 @@ export interface MutationComponentOptions<TData = any, TVariables = OperationVar
     // Warning: (ae-forgotten-export) The symbol "MutationResult" needs to be exported by the entry point index.d.ts
     //
     // (undocumented)
-    children: (mutateFunction: MutationFunction<TData, TVariables, TContext>, result: MutationResult<TData>) => JSX.Element | null;
+    children: (mutateFunction: MutationFunction<TData, TVariables, TContext>, result: MutationResult<TData>) => ReactTypes.JSX.Element | null;
     // (undocumented)
     mutation: DocumentNode | TypedDocumentNode<TData, TVariables>;
 }
@@ -1205,7 +1204,7 @@ type OperationVariables = Record<string, any>;
 type Path = ReadonlyArray<string | number>;
 
 // @public (undocumented)
-export function Query<TData = any, TVariables extends OperationVariables = OperationVariables>(props: QueryComponentOptions<TData, TVariables>): JSX.Element | null;
+export function Query<TData = any, TVariables extends OperationVariables = OperationVariables>(props: QueryComponentOptions<TData, TVariables>): ReactTypes.JSX.Element | null;
 
 // @public (undocumented)
 export namespace Query {
@@ -1226,7 +1225,7 @@ export interface QueryComponentOptions<TData = any, TVariables extends Operation
     // Warning: (ae-forgotten-export) The symbol "QueryResult" needs to be exported by the entry point index.d.ts
     //
     // (undocumented)
-    children: (result: QueryResult<TData, TVariables>) => JSX.Element | null;
+    children: (result: QueryResult<TData, TVariables>) => ReactTypes.JSX.Element | null;
     // (undocumented)
     query: DocumentNode | TypedDocumentNode<TData, TVariables>;
 }
@@ -1615,7 +1614,7 @@ type SubscribeToMoreOptions<TData = any, TSubscriptionVariables = OperationVaria
 };
 
 // @public (undocumented)
-export function Subscription<TData = any, TVariables extends OperationVariables = OperationVariables>(props: SubscriptionComponentOptions<TData, TVariables>): JSX.Element | null;
+export function Subscription<TData = any, TVariables extends OperationVariables = OperationVariables>(props: SubscriptionComponentOptions<TData, TVariables>): ReactTypes.JSX.Element | null;
 
 // @public (undocumented)
 export namespace Subscription {
@@ -1634,7 +1633,7 @@ export interface Subscription<TData, TVariables extends OperationVariables> {
 // @public (undocumented)
 export interface SubscriptionComponentOptions<TData = any, TVariables extends OperationVariables = OperationVariables> extends BaseSubscriptionOptions<TData, TVariables> {
     // (undocumented)
-    children?: null | ((result: SubscriptionResult<TData>) => JSX.Element | null);
+    children?: null | ((result: SubscriptionResult<TData>) => ReactTypes.JSX.Element | null);
     // (undocumented)
     subscription: DocumentNode | TypedDocumentNode<TData, TVariables>;
 }
diff --git a/.api-reports/api-report-react_hoc.md b/.api-reports/api-report-react_hoc.md
index f5a418ae812..bf4d99a6b7b 100644
--- a/.api-reports/api-report-react_hoc.md
+++ b/.api-reports/api-report-react_hoc.md
@@ -4,8 +4,6 @@
 
 ```ts
 
-/// <reference types="react" />
-
 import type { ASTNode } from 'graphql';
 import type { DocumentNode } from 'graphql';
 import type { ExecutionResult } from 'graphql';
@@ -733,7 +731,7 @@ interface FragmentMap {
 type FragmentMatcher = (rootValue: any, typeCondition: string, context: any) => boolean;
 
 // @public (undocumented)
-export function graphql<TProps extends TGraphQLVariables | {} = {}, TData extends object = {}, TGraphQLVariables extends OperationVariables = {}, TChildProps extends object = Partial<DataProps<TData, TGraphQLVariables>> & Partial<MutateProps<TData, TGraphQLVariables>>>(document: DocumentNode, operationOptions?: OperationOption<TProps, TData, TGraphQLVariables, TChildProps>): (WrappedComponent: React.ComponentType<TProps & TChildProps>) => React.ComponentClass<TProps>;
+export function graphql<TProps extends TGraphQLVariables | {} = {}, TData extends object = {}, TGraphQLVariables extends OperationVariables = {}, TChildProps extends object = Partial<DataProps<TData, TGraphQLVariables>> & Partial<MutateProps<TData, TGraphQLVariables>>>(document: DocumentNode, operationOptions?: OperationOption<TProps, TData, TGraphQLVariables, TChildProps>): (WrappedComponent: ReactTypes.ComponentType<TProps & TChildProps>) => ReactTypes.ComponentClass<TProps>;
 
 // @public (undocumented)
 type GraphQLErrors = ReadonlyArray<GraphQLError>;
diff --git a/src/react/components/Mutation.tsx b/src/react/components/Mutation.tsx
index 492e0089312..87bc5ba03c0 100644
--- a/src/react/components/Mutation.tsx
+++ b/src/react/components/Mutation.tsx
@@ -1,4 +1,5 @@
 import * as PropTypes from "prop-types";
+import type * as ReactTypes from 'react'
 
 import type { OperationVariables } from "../../core/index.js";
 import type { MutationComponentOptions } from "./types.js";
@@ -6,7 +7,7 @@ import { useMutation } from "../hooks/index.js";
 
 export function Mutation<TData = any, TVariables = OperationVariables>(
   props: MutationComponentOptions<TData, TVariables>
-) {
+): ReactTypes.JSX.Element | null {
   const [runMutation, result] = useMutation(props.mutation, props);
   return props.children ? props.children(runMutation, result) : null;
 }
diff --git a/src/react/components/Query.tsx b/src/react/components/Query.tsx
index 1e5611f646a..119696f3973 100644
--- a/src/react/components/Query.tsx
+++ b/src/react/components/Query.tsx
@@ -1,4 +1,5 @@
 import * as PropTypes from "prop-types";
+import type * as ReactTypes from "react";
 
 import type { OperationVariables } from "../../core/index.js";
 import type { QueryComponentOptions } from "./types.js";
@@ -7,7 +8,9 @@ import { useQuery } from "../hooks/index.js";
 export function Query<
   TData = any,
   TVariables extends OperationVariables = OperationVariables,
->(props: QueryComponentOptions<TData, TVariables>) {
+>(
+  props: QueryComponentOptions<TData, TVariables>
+): ReactTypes.JSX.Element | null {
   const { children, query, ...options } = props;
   const result = useQuery(query, options);
   return result ? children(result as any) : null;
diff --git a/src/react/components/Subscription.tsx b/src/react/components/Subscription.tsx
index 5701cdcb01d..76dda1a6241 100644
--- a/src/react/components/Subscription.tsx
+++ b/src/react/components/Subscription.tsx
@@ -1,4 +1,5 @@
 import * as PropTypes from "prop-types";
+import type * as ReactTypes from "react";
 
 import type { OperationVariables } from "../../core/index.js";
 import type { SubscriptionComponentOptions } from "./types.js";
@@ -7,7 +8,9 @@ import { useSubscription } from "../hooks/index.js";
 export function Subscription<
   TData = any,
   TVariables extends OperationVariables = OperationVariables,
->(props: SubscriptionComponentOptions<TData, TVariables>) {
+>(
+  props: SubscriptionComponentOptions<TData, TVariables>
+): ReactTypes.JSX.Element | null {
   const result = useSubscription(props.subscription, props);
   return props.children && result ? props.children(result) : null;
 }
diff --git a/src/react/components/types.ts b/src/react/components/types.ts
index 4e1abacb6a1..a0114f65ae2 100644
--- a/src/react/components/types.ts
+++ b/src/react/components/types.ts
@@ -1,6 +1,8 @@
 import type { DocumentNode } from "graphql";
 import type { TypedDocumentNode } from "@graphql-typed-document-node/core";
 
+import type * as ReactTypes from "react";
+
 import type {
   OperationVariables,
   DefaultContext,
@@ -20,7 +22,9 @@ export interface QueryComponentOptions<
   TData = any,
   TVariables extends OperationVariables = OperationVariables,
 > extends QueryFunctionOptions<TData, TVariables> {
-  children: (result: QueryResult<TData, TVariables>) => JSX.Element | null;
+  children: (
+    result: QueryResult<TData, TVariables>
+  ) => ReactTypes.JSX.Element | null;
   query: DocumentNode | TypedDocumentNode<TData, TVariables>;
 }
 
@@ -34,7 +38,7 @@ export interface MutationComponentOptions<
   children: (
     mutateFunction: MutationFunction<TData, TVariables, TContext>,
     result: MutationResult<TData>
-  ) => JSX.Element | null;
+  ) => ReactTypes.JSX.Element | null;
 }
 
 export interface SubscriptionComponentOptions<
@@ -42,5 +46,7 @@ export interface SubscriptionComponentOptions<
   TVariables extends OperationVariables = OperationVariables,
 > extends BaseSubscriptionOptions<TData, TVariables> {
   subscription: DocumentNode | TypedDocumentNode<TData, TVariables>;
-  children?: null | ((result: SubscriptionResult<TData>) => JSX.Element | null);
+  children?:
+    | null
+    | ((result: SubscriptionResult<TData>) => ReactTypes.JSX.Element | null);
 }
diff --git a/src/react/hoc/graphql.tsx b/src/react/hoc/graphql.tsx
index 88bf39e9961..1a770aae04e 100644
--- a/src/react/hoc/graphql.tsx
+++ b/src/react/hoc/graphql.tsx
@@ -1,4 +1,5 @@
 import type { DocumentNode } from "graphql";
+import type * as ReactTypes from "react";
 
 import { parser, DocumentType } from "../parser/index.js";
 import { withQuery } from "./query-hoc.js";
@@ -22,8 +23,8 @@ export function graphql<
     TChildProps
   > = {}
 ): (
-  WrappedComponent: React.ComponentType<TProps & TChildProps>
-) => React.ComponentClass<TProps> {
+  WrappedComponent: ReactTypes.ComponentType<TProps & TChildProps>
+) => ReactTypes.ComponentClass<TProps> {
   switch (parser(document).type) {
     case DocumentType.Mutation:
       return withMutation(document, operationOptions);