diff --git a/CHANGELOG.md b/CHANGELOG.md
index a1fb07c761..914130cead 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -35,6 +35,7 @@
 - Fix JSX settings inheritance: only 'version' propagates to dependencies, preserving their 'mode' and 'module'. https://github.com/rescript-lang/rescript-compiler/pull/7094
 - Fix variant cast to int. https://github.com/rescript-lang/rescript-compiler/pull/7058
 - Fix comments formatted away in function without arguments. https://github.com/rescript-lang/rescript-compiler/pull/7095
+- Fix genType JSX component compilation. https://github.com/rescript-lang/rescript-compiler/pull/7107
 
 #### :nail_care: Polish
 
diff --git a/compiler/gentype/TranslateTypeExprFromTypes.ml b/compiler/gentype/TranslateTypeExprFromTypes.ml
index f7e949a95a..d559a8215a 100644
--- a/compiler/gentype/TranslateTypeExprFromTypes.ml
+++ b/compiler/gentype/TranslateTypeExprFromTypes.ml
@@ -207,7 +207,8 @@ let translate_constr ~config ~params_translation ~(path : Path.t) ~type_env =
     {dependencies = []; type_ = EmitType.type_react_event_mouse_t}
   | ( ( ["React"; "element"]
       | ["ReasonReact"; "reactElement"]
-      | ["Pervasives"; "Jsx"; "element"] ),
+      | ["Pervasives"; "Jsx"; "element"]
+      | ["Jsx"; "element"] ),
       [] ) ->
     {dependencies = []; type_ = EmitType.type_react_element}
   | (["FB"; "option"] | ["option"]), [param_translation] ->
diff --git a/tests/gentype_tests/typescript-react-example/src/Hooks.gen.tsx b/tests/gentype_tests/typescript-react-example/src/Hooks.gen.tsx
index f0d4e76bd2..1d9a1e530f 100644
--- a/tests/gentype_tests/typescript-react-example/src/Hooks.gen.tsx
+++ b/tests/gentype_tests/typescript-react-example/src/Hooks.gen.tsx
@@ -7,8 +7,6 @@ import * as HooksJS from './Hooks.res.js';
 
 import type {TypedArray2_Uint8Array_t as Js_TypedArray2_Uint8Array_t} from '../src/shims/Js.shim';
 
-import type {element as Jsx_element} from '../src/shims/Jsx.shim';
-
 export type vehicle = { readonly name: string };
 
 export type props<vehicle> = { readonly vehicle: vehicle };
@@ -57,21 +55,21 @@ export type WithChildren_props<vehicle,children> = { readonly vehicle: vehicle;
 
 export type DD_props<array,name> = { readonly array: array; readonly name: name };
 
-export const $$default: (_1:props<vehicle>) => Jsx_element = HooksJS.default as any;
+export const $$default: React.ComponentType<{ readonly vehicle: vehicle }> = HooksJS.default as any;
 
 export default $$default;
 
-export const Another_anotherComponent: (_1:Another_props<vehicle,(() => void)>) => Jsx_element = HooksJS.Another.anotherComponent as any;
+export const Another_anotherComponent: React.ComponentType<{ readonly vehicle: vehicle; readonly callback: () => void }> = HooksJS.Another.anotherComponent as any;
 
-export const Inner_make: (_1:Inner_props<vehicle>) => Jsx_element = HooksJS.Inner.make as any;
+export const Inner_make: React.ComponentType<{ readonly vehicle: vehicle }> = HooksJS.Inner.make as any;
 
-export const Inner_Another_anotherComponent: (_1:Inner_Another_props<vehicle>) => Jsx_element = HooksJS.Inner.Another.anotherComponent as any;
+export const Inner_Another_anotherComponent: React.ComponentType<{ readonly vehicle: vehicle }> = HooksJS.Inner.Another.anotherComponent as any;
 
-export const Inner_Inner2_make: (_1:Inner_Inner2_props<vehicle>) => Jsx_element = HooksJS.Inner.Inner2.make as any;
+export const Inner_Inner2_make: React.ComponentType<{ readonly vehicle: vehicle }> = HooksJS.Inner.Inner2.make as any;
 
-export const Inner_Inner2_Another_anotherComponent: (_1:Inner_Inner2_Another_props<vehicle>) => Jsx_element = HooksJS.Inner.Inner2.Another.anotherComponent as any;
+export const Inner_Inner2_Another_anotherComponent: React.ComponentType<{ readonly vehicle: vehicle }> = HooksJS.Inner.Inner2.Another.anotherComponent as any;
 
-export const NoProps_make: (_1:NoProps_props) => Jsx_element = HooksJS.NoProps.make as any;
+export const NoProps_make: React.ComponentType<{}> = HooksJS.NoProps.make as any;
 
 export const functionWithRenamedArgs: (_to:vehicle, _Type:vehicle, cb:cb) => string = HooksJS.functionWithRenamedArgs as any;
 
@@ -93,23 +91,31 @@ export const Fun_functionReturningReactElement: React.ComponentType<{ readonly n
 
 export const RenderPropRequiresConversion_make: React.ComponentType<{ readonly renderVehicle: React.ComponentType<{ readonly number: number; readonly vehicle: vehicle }> }> = HooksJS.RenderPropRequiresConversion.make as any;
 
-export const WithChildren_aComponentWithChildren: (_1:WithChildren_props<vehicle,JSX.Element>) => Jsx_element = HooksJS.WithChildren.aComponentWithChildren as any;
+export const WithChildren_aComponentWithChildren: React.ComponentType<{ readonly vehicle: vehicle; readonly children: React.ReactNode }> = HooksJS.WithChildren.aComponentWithChildren as any;
 
 export const DD_make: React.ComponentType<{ readonly array: Js_TypedArray2_Uint8Array_t; readonly name: string }> = HooksJS.DD.make as any;
 
-export const NoProps: { make: (_1:NoProps_props) => Jsx_element } = HooksJS.NoProps as any;
+export const NoProps: { make: React.ComponentType<{}> } = HooksJS.NoProps as any;
 
 export const Inner: {
   Inner2: {
     Another: {
-      anotherComponent: (_1:Inner_Inner2_Another_props<vehicle>) => Jsx_element
+      anotherComponent: React.ComponentType<{
+        readonly vehicle: vehicle
+      }>
     }; 
-    make: (_1:Inner_Inner2_props<vehicle>) => Jsx_element
+    make: React.ComponentType<{
+      readonly vehicle: vehicle
+    }>
   }; 
   Another: {
-    anotherComponent: (_1:Inner_Another_props<vehicle>) => Jsx_element
+    anotherComponent: React.ComponentType<{
+      readonly vehicle: vehicle
+    }>
   }; 
-  make: (_1:Inner_props<vehicle>) => Jsx_element
+  make: React.ComponentType<{
+    readonly vehicle: vehicle
+  }>
 } = HooksJS.Inner as any;
 
 export const RenderPropRequiresConversion: { make: React.ComponentType<{ readonly renderVehicle: React.ComponentType<{ readonly number: number; readonly vehicle: vehicle }> }> } = HooksJS.RenderPropRequiresConversion as any;
@@ -126,10 +132,10 @@ export const Fun: { functionReturningReactElement: React.ComponentType<{ readonl
 
 export const WithRef: { makeWithRef: (_1:WithRef_props<vehicle>) => (_1:(null | undefined | any)) => JSX.Element } = HooksJS.WithRef as any;
 
-export const WithChildren: { aComponentWithChildren: (_1:WithChildren_props<vehicle,JSX.Element>) => Jsx_element } = HooksJS.WithChildren as any;
+export const WithChildren: { aComponentWithChildren: React.ComponentType<{ readonly vehicle: vehicle; readonly children: React.ReactNode }> } = HooksJS.WithChildren as any;
 
 export const DD: { make: React.ComponentType<{ readonly array: Js_TypedArray2_Uint8Array_t; readonly name: string }> } = HooksJS.DD as any;
 
-export const Another: { anotherComponent: (_1:Another_props<vehicle,(() => void)>) => Jsx_element } = HooksJS.Another as any;
+export const Another: { anotherComponent: React.ComponentType<{ readonly vehicle: vehicle; readonly callback: () => void }> } = HooksJS.Another as any;
 
 export const Poly: { polymorphicComponent: React.ComponentType<{ readonly p: [vehicle, any] }> } = HooksJS.Poly as any;
diff --git a/tests/gentype_tests/typescript-react-example/src/OnClick2.gen.tsx b/tests/gentype_tests/typescript-react-example/src/OnClick2.gen.tsx
index 211c80ee99..a804d5483d 100644
--- a/tests/gentype_tests/typescript-react-example/src/OnClick2.gen.tsx
+++ b/tests/gentype_tests/typescript-react-example/src/OnClick2.gen.tsx
@@ -7,8 +7,6 @@ import * as OnClick2JS from './OnClick2.res.js';
 
 import type {Mouse_t as JsxEvent_Mouse_t} from '../src/shims/JsxEvent.shim';
 
-import type {element as Jsx_element} from '../src/shims/Jsx.shim';
-
 export type props<onClick> = { readonly onClick: onClick };
 
-export const make: (_1:props<((_1:JsxEvent_Mouse_t) => void)>) => Jsx_element = OnClick2JS.make as any;
+export const make: React.ComponentType<{ readonly onClick: (_1:JsxEvent_Mouse_t) => void }> = OnClick2JS.make as any;