diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-forward-ref.spec.ts b/packages/plugins/eslint-plugin-react-x/src/rules/no-forward-ref.spec.ts
index beaf1fd1fe..13d1181f9c 100644
--- a/packages/plugins/eslint-plugin-react-x/src/rules/no-forward-ref.spec.ts
+++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-forward-ref.spec.ts
@@ -191,7 +191,7 @@ ruleTester.run(RULE_NAME, rule, {
         interface ComponentProps {
           foo: string;
         }
-        const Component = function Component({ ref, ...props }: ComponentProps & { ref: React.RefObject<HTMLElement> }) {
+        const Component = function Component({ ref, ...props }: ComponentProps & { ref?: React.RefObject<HTMLElement | null> }) {
           return <div ref={ref} />;
         };
       `,
@@ -211,7 +211,7 @@ ruleTester.run(RULE_NAME, rule, {
       errors: [{ messageId: "noForwardRef" }],
       output: /* tsx */ `
         import * as React from 'react'
-        const Component = function Component({ ref, ...props }: { foo: string } & { ref: React.RefObject<HTMLElement> }) {
+        const Component = function Component({ ref, ...props }: { foo: string } & { ref?: React.RefObject<HTMLElement | null> }) {
           return <div ref={ref}>{props.foo}</div>;
         };
       `,
@@ -231,7 +231,7 @@ ruleTester.run(RULE_NAME, rule, {
       errors: [{ messageId: "noForwardRef" }],
       output: /* tsx */ `
         import * as React from 'react'
-        const Component = function Component({ ref, foo }: { foo: string } & { ref: React.RefObject<HTMLElement> }) {
+        const Component = function Component({ ref, foo }: { foo: string } & { ref?: React.RefObject<HTMLElement | null> }) {
           return <div ref={ref}>{foo}</div>;
         };
       `,
@@ -251,7 +251,7 @@ ruleTester.run(RULE_NAME, rule, {
       errors: [{ messageId: "noForwardRef" }],
       output: /* tsx */ `
         import * as React from 'react'
-        const Component = function Component({ ref: r, foo }: { foo: string } & { ref: React.RefObject<HTMLElement> }) {
+        const Component = function Component({ ref: r, foo }: { foo: string } & { ref?: React.RefObject<HTMLElement | null> }) {
           return <div ref={r}>{foo}</div>;
         };
       `,
@@ -271,7 +271,7 @@ ruleTester.run(RULE_NAME, rule, {
       errors: [{ messageId: "noForwardRef" }],
       output: /* tsx */ `
         import * as React from 'react'
-        const Component = function Component({ ref: r, foo, ...rest }: { foo: string, bar: number } & { ref: React.RefObject<HTMLElement> }) {
+        const Component = function Component({ ref: r, foo, ...rest }: { foo: string, bar: number } & { ref?: React.RefObject<HTMLElement | null> }) {
           return <div ref={r}>{foo}</div>;
         };
       `,
diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-forward-ref.ts b/packages/plugins/eslint-plugin-react-x/src/rules/no-forward-ref.ts
index 6a67c86c71..ff327448f1 100644
--- a/packages/plugins/eslint-plugin-react-x/src/rules/no-forward-ref.ts
+++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-forward-ref.ts
@@ -131,8 +131,8 @@ function getComponentPropsFixes(
         getText(typeArg1),
         "&",
         "{",
-        `ref:`,
-        `React.RefObject<${getText(typeArg0)}>`,
+        `ref?:`,
+        `React.RefObject<${getText(typeArg0)} | null>`,
         "}",
       ].join(" "),
     ),