diff --git a/CHANGELOG.md b/CHANGELOG.md
index 28c16a63ea..2d71a3d889 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -32,6 +32,7 @@
 - Fix "rescript format" with many files. https://github.com/rescript-lang/rescript-compiler/pull/7081
 - Fix bigint max, min https://github.com/rescript-lang/rescript-compiler/pull/7088
 - Fix parsing issue with nested variant pattern type spreads. https://github.com/rescript-lang/rescript-compiler/pull/7080
+- Fix JSX settings inheritance: only 'version' propagates to dependencies, preserving their 'mode' and 'module'. https://github.com/rescript-lang/rescript-compiler/pull/7094
 
 #### :nail_care: Polish
 
diff --git a/compiler/bsb/bsb_config_parse.ml b/compiler/bsb/bsb_config_parse.ml
index df1923ce4e..7fee6a607f 100644
--- a/compiler/bsb/bsb_config_parse.ml
+++ b/compiler/bsb/bsb_config_parse.ml
@@ -261,6 +261,12 @@ let interpret_json ~(filename : string) ~(json : Ext_json_types.t)
       in
       let bsc_flags = extract_string_list map Bsb_build_schemas.bsc_flags in
       let jsx = Bsb_jsx.from_map map in
+      let jsx, bsc_flags =
+        match package_kind with
+        | Pinned_dependency x | Dependency x ->
+          ({jsx with version = x.jsx.version}, bsc_flags)
+        | Toplevel -> (jsx, bsc_flags)
+      in
       {
         pinned_dependencies;
         gentype_config;
diff --git a/tests/build_tests/jsx_settings_inheritance/.gitignore b/tests/build_tests/jsx_settings_inheritance/.gitignore
new file mode 100644
index 0000000000..d64bd833ba
--- /dev/null
+++ b/tests/build_tests/jsx_settings_inheritance/.gitignore
@@ -0,0 +1,2 @@
+!node_modules
+node_modules/**/lib
diff --git a/tests/build_tests/jsx_settings_inheritance/input.js b/tests/build_tests/jsx_settings_inheritance/input.js
new file mode 100644
index 0000000000..96e9ab8353
--- /dev/null
+++ b/tests/build_tests/jsx_settings_inheritance/input.js
@@ -0,0 +1,5 @@
+//@ts-check
+var cp = require("child_process");
+var { rescript_exe } = require("#cli/bin_path");
+
+cp.execSync(rescript_exe, { cwd: __dirname });
diff --git a/tests/build_tests/jsx_settings_inheritance/node_modules/@rescript/react/rescript.json b/tests/build_tests/jsx_settings_inheritance/node_modules/@rescript/react/rescript.json
new file mode 100644
index 0000000000..e948391f26
--- /dev/null
+++ b/tests/build_tests/jsx_settings_inheritance/node_modules/@rescript/react/rescript.json
@@ -0,0 +1,13 @@
+{
+  "name": "@rescript/react",
+  "jsx": {
+    "version": 4,
+    "mode": "classic"
+  },
+  "sources": [{ "dir": "src", "subdirs": true }],
+  "package-specs": [{ "module": "commonjs", "in-source": true }],
+  "suffix": ".bs.js",
+  "bs-dev-dependencies": [],
+  "bsc-flags": [],
+  "uncurried": false
+}
\ No newline at end of file
diff --git a/tests/build_tests/jsx_settings_inheritance/node_modules/@rescript/react/src/React.mjs b/tests/build_tests/jsx_settings_inheritance/node_modules/@rescript/react/src/React.mjs
new file mode 100644
index 0000000000..abd3ce43c9
--- /dev/null
+++ b/tests/build_tests/jsx_settings_inheritance/node_modules/@rescript/react/src/React.mjs
@@ -0,0 +1,34 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+'use strict';
+
+let React = require("react");
+
+let Ref = {};
+
+let Children = {};
+
+let Context = {};
+
+let Fragment = {};
+
+let StrictMode = {};
+
+let Suspense = {};
+
+function lazy_(load) {
+  return React.lazy(async () => ({
+    default: await load()
+  }));
+}
+
+let Uncurried = {};
+
+exports.Ref = Ref;
+exports.Children = Children;
+exports.Context = Context;
+exports.Fragment = Fragment;
+exports.StrictMode = StrictMode;
+exports.Suspense = Suspense;
+exports.lazy_ = lazy_;
+exports.Uncurried = Uncurried;
+/* react Not a pure module */
diff --git a/tests/build_tests/jsx_settings_inheritance/node_modules/@rescript/react/src/React.res b/tests/build_tests/jsx_settings_inheritance/node_modules/@rescript/react/src/React.res
new file mode 100644
index 0000000000..01f4ebc91a
--- /dev/null
+++ b/tests/build_tests/jsx_settings_inheritance/node_modules/@rescript/react/src/React.res
@@ -0,0 +1,471 @@
+type element = Jsx.element
+
+@val external null: element = "null"
+
+external float: float => element = "%identity"
+external int: int => element = "%identity"
+external string: string => element = "%identity"
+
+external array: array<element> => element = "%identity"
+
+type componentLike<'props, 'return> = Jsx.componentLike<'props, 'return>
+
+type component<'props> = Jsx.component<'props>
+
+external component: componentLike<'props, element> => component<'props> = "%identity"
+
+@module("react")
+external createElement: (component<'props>, 'props) => element = "createElement"
+
+@module("react")
+external cloneElement: (element, 'props) => element = "cloneElement"
+
+@module("react")
+external isValidElement: 'a => bool = "isValidElement"
+
+@variadic @module("react")
+external createElementVariadic: (component<'props>, 'props, array<element>) => element =
+  "createElement"
+
+@module("react/jsx-runtime")
+external jsx: (component<'props>, 'props) => element = "jsx"
+
+@module("react/jsx-runtime")
+external jsxKeyed: (component<'props>, 'props, ~key: string=?, @ignore unit) => element = "jsx"
+
+@module("react/jsx-runtime")
+external jsxs: (component<'props>, 'props) => element = "jsxs"
+
+@module("react/jsx-runtime")
+external jsxsKeyed: (component<'props>, 'props, ~key: string=?, @ignore unit) => element = "jsxs"
+
+type fragmentProps = {children?: element}
+
+@module("react/jsx-runtime") external jsxFragment: component<fragmentProps> = "Fragment"
+
+type ref<'value> = {mutable current: 'value}
+
+module Ref = {
+  @deprecated("Please use the type React.ref instead")
+  type t<'value> = ref<'value>
+
+  @deprecated("Please directly read from ref.current instead") @get
+  external current: ref<'value> => 'value = "current"
+
+  @deprecated("Please directly assign to ref.current instead") @set
+  external setCurrent: (ref<'value>, 'value) => unit = "current"
+}
+
+@module("react")
+external createRef: unit => ref<Js.nullable<'a>> = "createRef"
+
+module Children = {
+  @module("react") @scope("Children")
+  external map: (element, element => element) => element = "map"
+  @module("react") @scope("Children")
+  external mapWithIndex: (element, @uncurry (element, int) => element) => element = "map"
+  @module("react") @scope("Children")
+  external forEach: (element, element => unit) => unit = "forEach"
+  @module("react") @scope("Children")
+  external forEachWithIndex: (element, @uncurry (element, int) => unit) => unit = "forEach"
+  @module("react") @scope("Children")
+  external count: element => int = "count"
+  @module("react") @scope("Children")
+  external only: element => element = "only"
+  @module("react") @scope("Children")
+  external toArray: element => array<element> = "toArray"
+}
+
+module Context = {
+  type t<'context>
+
+  type props<'context> = {
+    value: 'context,
+    children: element,
+  }
+
+  @get
+  external provider: t<'context> => component<props<'context>> = "Provider"
+}
+
+@module("react")
+external createContext: 'a => Context.t<'a> = "createContext"
+
+@module("react")
+external forwardRef: (@uncurry ('props, Js.Nullable.t<ref<'a>>) => element) => component<'props> =
+  "forwardRef"
+
+@module("react")
+external memo: component<'props> => component<'props> = "memo"
+
+@module("react")
+external memoCustomCompareProps: (
+  component<'props>,
+  @uncurry ('props, 'props) => bool,
+) => component<'props> = "memo"
+
+@module("react") external fragment: component<fragmentProps> = "Fragment"
+
+module Fragment = {
+  type props = {key?: string, children: element}
+
+  @module("react")
+  external make: component<props> = "Fragment"
+}
+
+module StrictMode = {
+  type props = {key?: string, children: element}
+
+  @module("react")
+  external make: component<props> = "StrictMode"
+}
+
+module Suspense = {
+  type props = {key?: string, children?: element, fallback?: element}
+
+  @module("react")
+  external make: component<props> = "Suspense"
+}
+
+type dynamicallyImportedModule<'a> = {default: component<'a>}
+
+@module("react")
+external lazy_: (unit => promise<dynamicallyImportedModule<'a>>) => component<'a> = "lazy"
+
+let lazy_ = load => lazy_(async () => {default: await load()})
+
+/* HOOKS */
+
+/*
+ * Yeah, we know this api isn't great. tl;dr: useReducer instead.
+ * It's because useState can take functions or non-function values and treats
+ * them differently. Lazy initializer + callback which returns state is the
+ * only way to safely have any type of state and be able to update it correctly.
+ */
+@module("react")
+external useState: (@uncurry (unit => 'state)) => ('state, ('state => 'state) => unit) = "useState"
+
+@module("react")
+external useReducer: (@uncurry ('state, 'action) => 'state, 'state) => ('state, 'action => unit) =
+  "useReducer"
+
+@module("react")
+external useReducerWithMapState: (
+  @uncurry ('state, 'action) => 'state,
+  'initialState,
+  @uncurry ('initialState => 'state),
+) => ('state, 'action => unit) = "useReducer"
+
+@module("react")
+external useEffectOnEveryRender: (@uncurry (unit => option<unit => unit>)) => unit = "useEffect"
+@module("react")
+external useEffect: (@uncurry (unit => option<unit => unit>), 'deps) => unit = "useEffect"
+@module("react") @deprecated("Please use useEffect or useEffectOnEveryRender instead")
+external useEffect0: (@uncurry (unit => option<unit => unit>), @as(json`[]`) _) => unit =
+  "useEffect"
+@module("react") @deprecated("Please use useEffect or useEffectOnEveryRender instead")
+external useEffect1: (@uncurry (unit => option<unit => unit>), array<'a>) => unit = "useEffect"
+@module("react") @deprecated("Please use useEffect or useEffectOnEveryRender instead")
+external useEffect2: (@uncurry (unit => option<unit => unit>), ('a, 'b)) => unit = "useEffect"
+@module("react") @deprecated("Please use useEffect or useEffectOnEveryRender instead")
+external useEffect3: (@uncurry (unit => option<unit => unit>), ('a, 'b, 'c)) => unit = "useEffect"
+@module("react") @deprecated("Please use useEffect or useEffectOnEveryRender instead")
+external useEffect4: (@uncurry (unit => option<unit => unit>), ('a, 'b, 'c, 'd)) => unit =
+  "useEffect"
+@module("react") @deprecated("Please use useEffect or useEffectOnEveryRender instead")
+external useEffect5: (@uncurry (unit => option<unit => unit>), ('a, 'b, 'c, 'd, 'e)) => unit =
+  "useEffect"
+@module("react") @deprecated("Please use useEffect or useEffectOnEveryRender instead")
+external useEffect6: (@uncurry (unit => option<unit => unit>), ('a, 'b, 'c, 'd, 'e, 'f)) => unit =
+  "useEffect"
+@module("react") @deprecated("Please use useEffect or useEffectOnEveryRender instead")
+external useEffect7: (
+  @uncurry (unit => option<unit => unit>),
+  ('a, 'b, 'c, 'd, 'e, 'f, 'g),
+) => unit = "useEffect"
+
+@module("react")
+external useLayoutEffectOnEveryRender: (@uncurry (unit => option<unit => unit>)) => unit =
+  "useLayoutEffect"
+@module("react")
+external useLayoutEffect: (@uncurry (unit => option<unit => unit>), 'deps) => unit =
+  "useLayoutEffect"
+@module("react") @deprecated("Please use useLayoutEffect or useLayoutEffectOnEveryRender instead")
+external useLayoutEffect0: (@uncurry (unit => option<unit => unit>), @as(json`[]`) _) => unit =
+  "useLayoutEffect"
+@module("react") @deprecated("Please use useLayoutEffect or useLayoutEffectOnEveryRender instead")
+external useLayoutEffect1: (@uncurry (unit => option<unit => unit>), array<'a>) => unit =
+  "useLayoutEffect"
+@module("react") @deprecated("Please use useLayoutEffect or useLayoutEffectOnEveryRender instead")
+external useLayoutEffect2: (@uncurry (unit => option<unit => unit>), ('a, 'b)) => unit =
+  "useLayoutEffect"
+@module("react") @deprecated("Please use useLayoutEffect or useLayoutEffectOnEveryRender instead")
+external useLayoutEffect3: (@uncurry (unit => option<unit => unit>), ('a, 'b, 'c)) => unit =
+  "useLayoutEffect"
+@module("react") @deprecated("Please use useLayoutEffect or useLayoutEffectOnEveryRender instead")
+external useLayoutEffect4: (@uncurry (unit => option<unit => unit>), ('a, 'b, 'c, 'd)) => unit =
+  "useLayoutEffect"
+@module("react") @deprecated("Please use useLayoutEffect or useLayoutEffectOnEveryRender instead")
+external useLayoutEffect5: (@uncurry (unit => option<unit => unit>), ('a, 'b, 'c, 'd, 'e)) => unit =
+  "useLayoutEffect"
+@module("react") @deprecated("Please use useLayoutEffect or useLayoutEffectOnEveryRender instead")
+external useLayoutEffect6: (
+  @uncurry (unit => option<unit => unit>),
+  ('a, 'b, 'c, 'd, 'e, 'f),
+) => unit = "useLayoutEffect"
+@module("react") @deprecated("Please use useLayoutEffect or useLayoutEffectOnEveryRender instead")
+external useLayoutEffect7: (
+  @uncurry (unit => option<unit => unit>),
+  ('a, 'b, 'c, 'd, 'e, 'f, 'g),
+) => unit = "useLayoutEffect"
+
+@module("react")
+external useMemo: (@uncurry (unit => 'any), 'deps) => 'any = "useMemo"
+
+@module("react") @deprecated("Please use useMemo instead")
+external useMemo0: (@uncurry (unit => 'any), @as(json`[]`) _) => 'any = "useMemo"
+
+@module("react") @deprecated("Please use useMemo instead")
+external useMemo1: (@uncurry (unit => 'any), array<'a>) => 'any = "useMemo"
+
+@module("react") @deprecated("Please use useMemo instead")
+external useMemo2: (@uncurry (unit => 'any), ('a, 'b)) => 'any = "useMemo"
+
+@module("react") @deprecated("Please use useMemo instead")
+external useMemo3: (@uncurry (unit => 'any), ('a, 'b, 'c)) => 'any = "useMemo"
+
+@module("react") @deprecated("Please use useMemo instead")
+external useMemo4: (@uncurry (unit => 'any), ('a, 'b, 'c, 'd)) => 'any = "useMemo"
+
+@module("react") @deprecated("Please use useMemo instead")
+external useMemo5: (@uncurry (unit => 'any), ('a, 'b, 'c, 'd, 'e)) => 'any = "useMemo"
+
+@module("react") @deprecated("Please use useMemo instead")
+external useMemo6: (@uncurry (unit => 'any), ('a, 'b, 'c, 'd, 'e, 'f)) => 'any = "useMemo"
+
+@module("react") @deprecated("Please use useMemo instead")
+external useMemo7: (@uncurry (unit => 'any), ('a, 'b, 'c, 'd, 'e, 'f, 'g)) => 'any = "useMemo"
+
+@module("react")
+external useCallback: ('f, 'deps) => 'f = "useCallback"
+
+@module("react") @deprecated("Please use useCallback instead")
+external useCallback0: ('f, @as(json`[]`) _) => 'f = "useCallback"
+
+@module("react") @deprecated("Please use useCallback instead")
+external useCallback1: ('f, array<'a>) => 'f = "useCallback"
+
+@module("react") @deprecated("Please use useCallback instead")
+external useCallback2: ('f, ('a, 'b)) => 'f = "useCallback"
+
+@module("react") @deprecated("Please use useCallback instead")
+external useCallback3: ('f, ('a, 'b, 'c)) => 'f = "useCallback"
+
+@module("react") @deprecated("Please use useCallback instead")
+external useCallback4: ('f, ('a, 'b, 'c, 'd)) => 'f = "useCallback"
+
+@module("react") @deprecated("Please use useCallback instead")
+external useCallback5: ('f, ('a, 'b, 'c, 'd, 'e)) => 'f = "useCallback"
+
+@module("react") @deprecated("Please use useCallback instead")
+external useCallback6: ('callback, ('a, 'b, 'c, 'd, 'e, 'f)) => 'callback = "useCallback"
+
+@module("react") @deprecated("Please use useCallback instead")
+external useCallback7: ('callback, ('a, 'b, 'c, 'd, 'e, 'f, 'g)) => 'callback = "useCallback"
+
+@module("react")
+external useContext: Context.t<'any> => 'any = "useContext"
+
+@module("react") external useRef: 'value => ref<'value> = "useRef"
+
+@module("react")
+external useImperativeHandleOnEveryRender: (
+  Js.Nullable.t<ref<'value>>,
+  @uncurry (unit => 'value),
+) => unit = "useImperativeHandle"
+
+@module("react")
+external useImperativeHandle: (
+  Js.Nullable.t<ref<'value>>,
+  @uncurry (unit => 'value),
+  'deps,
+) => unit = "useImperativeHandle"
+
+@module("react")
+@deprecated("Please use useImperativeHandle or useImperativeHandleOnEveryRender instead")
+external useImperativeHandle0: (
+  Js.Nullable.t<ref<'value>>,
+  @uncurry (unit => 'value),
+  @as(json`[]`) _,
+) => unit = "useImperativeHandle"
+
+@module("react")
+@deprecated("Please use useImperativeHandle or useImperativeHandleOnEveryRender instead")
+external useImperativeHandle1: (
+  Js.Nullable.t<ref<'value>>,
+  @uncurry (unit => 'value),
+  array<'a>,
+) => unit = "useImperativeHandle"
+
+@module("react")
+@deprecated("Please use useImperativeHandle or useImperativeHandleOnEveryRender instead")
+external useImperativeHandle2: (
+  Js.Nullable.t<ref<'value>>,
+  @uncurry (unit => 'value),
+  ('a, 'b),
+) => unit = "useImperativeHandle"
+
+@module("react")
+@deprecated("Please use useImperativeHandle or useImperativeHandleOnEveryRender instead")
+external useImperativeHandle3: (
+  Js.Nullable.t<ref<'value>>,
+  @uncurry (unit => 'value),
+  ('a, 'b, 'c),
+) => unit = "useImperativeHandle"
+
+@module("react")
+@deprecated("Please use useImperativeHandle or useImperativeHandleOnEveryRender instead")
+external useImperativeHandle4: (
+  Js.Nullable.t<ref<'value>>,
+  @uncurry (unit => 'value),
+  ('a, 'b, 'c, 'd),
+) => unit = "useImperativeHandle"
+
+@module("react")
+@deprecated("Please use useImperativeHandle or useImperativeHandleOnEveryRender instead")
+external useImperativeHandle5: (
+  Js.Nullable.t<ref<'value>>,
+  @uncurry (unit => 'value),
+  ('a, 'b, 'c, 'd, 'e),
+) => unit = "useImperativeHandle"
+
+@module("react")
+@deprecated("Please use useImperativeHandle or useImperativeHandleOnEveryRender instead")
+external useImperativeHandle6: (
+  Js.Nullable.t<ref<'value>>,
+  @uncurry (unit => 'value),
+  ('a, 'b, 'c, 'd, 'e, 'f),
+) => unit = "useImperativeHandle"
+
+@module("react")
+@deprecated("Please use useImperativeHandle or useImperativeHandleOnEveryRender instead")
+external useImperativeHandle7: (
+  Js.Nullable.t<ref<'value>>,
+  @uncurry (unit => 'value),
+  ('a, 'b, 'c, 'd, 'e, 'f, 'g),
+) => unit = "useImperativeHandle"
+
+@module("react") external useId: unit => string = "useId"
+
+@module("react") external useDeferredValue: 'value => 'value = "useDeferredValue"
+
+@module("react")
+external useTransition: unit => (bool, (unit => unit) => unit) = "useTransition"
+
+@module("react")
+external useInsertionEffectOnEveryRender: (@uncurry (unit => option<unit => unit>)) => unit =
+  "useInsertionEffect"
+@module("react")
+external useInsertionEffect: (@uncurry (unit => option<unit => unit>), 'deps) => unit =
+  "useInsertionEffect"
+@module("react")
+@deprecated("Please use useInsertionEffect or useInsertionEffectOnEveryRender instead")
+external useInsertionEffect0: (@uncurry (unit => option<unit => unit>), @as(json`[]`) _) => unit =
+  "useInsertionEffect"
+@module("react")
+@deprecated("Please use useInsertionEffect or useInsertionEffectOnEveryRender instead")
+external useInsertionEffect1: (@uncurry (unit => option<unit => unit>), array<'a>) => unit =
+  "useInsertionEffect"
+@module("react")
+@deprecated("Please use useInsertionEffect or useInsertionEffectOnEveryRender instead")
+external useInsertionEffect2: (@uncurry (unit => option<unit => unit>), ('a, 'b)) => unit =
+  "useInsertionEffect"
+@module("react")
+@deprecated("Please use useInsertionEffect or useInsertionEffectOnEveryRender instead")
+external useInsertionEffect3: (@uncurry (unit => option<unit => unit>), ('a, 'b, 'c)) => unit =
+  "useInsertionEffect"
+@module("react")
+@deprecated("Please use useInsertionEffect or useInsertionEffectOnEveryRender instead")
+external useInsertionEffect4: (@uncurry (unit => option<unit => unit>), ('a, 'b, 'c, 'd)) => unit =
+  "useInsertionEffect"
+@module("react")
+@deprecated("Please use useInsertionEffect or useInsertionEffectOnEveryRender instead")
+external useInsertionEffect5: (
+  @uncurry (unit => option<unit => unit>),
+  ('a, 'b, 'c, 'd, 'e),
+) => unit = "useInsertionEffect"
+@module("react")
+@deprecated("Please use useInsertionEffect or useInsertionEffectOnEveryRender instead")
+external useInsertionEffect6: (
+  @uncurry (unit => option<unit => unit>),
+  ('a, 'b, 'c, 'd, 'e, 'f),
+) => unit = "useInsertionEffect"
+@module("react")
+@deprecated("Please use useInsertionEffect or useInsertionEffectOnEveryRender instead")
+external useInsertionEffect7: (
+  @uncurry (unit => option<unit => unit>),
+  ('a, 'b, 'c, 'd, 'e, 'f, 'g),
+) => unit = "useInsertionEffect"
+
+@module("react")
+external useSyncExternalStore: (
+  ~subscribe: @uncurry ((unit => unit) => unit => unit),
+  ~getSnapshot: @uncurry unit => 'state,
+) => 'state = "useSyncExternalStore"
+
+@module("react")
+external useSyncExternalStoreWithServerSnapshot: (
+  ~subscribe: @uncurry ((unit => unit) => unit => unit),
+  ~getSnapshot: @uncurry unit => 'state,
+  ~getServerSnapshot: @uncurry unit => 'state,
+) => 'state = "useSyncExternalStore"
+
+module Uncurried = {
+  @module("react")
+  external useState: (@uncurry (unit => 'state)) => ('state, ('state => 'state) => unit) =
+    "useState"
+
+  @module("react")
+  external useReducer: (@uncurry ('state, 'action) => 'state, 'state) => ('state, 'action => unit) =
+    "useReducer"
+
+  @module("react")
+  external useReducerWithMapState: (
+    @uncurry ('state, 'action) => 'state,
+    'initialState,
+    @uncurry ('initialState => 'state),
+  ) => ('state, 'action => unit) = "useReducer"
+
+  @module("react")
+  external useCallback: ('f, 'deps) => 'f = "useCallback"
+
+  @module("react") @deprecated("Please use useCallback instead")
+  external useCallback0: ('f, @as(json`[]`) _) => 'f = "useCallback"
+
+  @module("react") @deprecated("Please use useCallback instead")
+  external useCallback1: ('f, array<'a>) => 'f = "useCallback"
+
+  @module("react") @deprecated("Please use useCallback instead")
+  external useCallback2: ('f, ('a, 'b)) => 'f = "useCallback"
+
+  @module("react") @deprecated("Please use useCallback instead")
+  external useCallback3: ('f, ('a, 'b, 'c)) => 'f = "useCallback"
+
+  @module("react") @deprecated("Please use useCallback instead")
+  external useCallback4: ('f, ('a, 'b, 'c, 'd)) => 'f = "useCallback"
+
+  @module("react") @deprecated("Please use useCallback instead")
+  external useCallback5: ('f, ('a, 'b, 'c, 'd, 'e)) => 'f = "useCallback"
+
+  @module("react") @deprecated("Please use useCallback instead")
+  external useCallback6: ('callback, ('a, 'b, 'c, 'd, 'e, 'f)) => 'callback = "useCallback"
+
+  @module("react") @deprecated("Please use useCallback instead")
+  external useCallback7: ('callback, ('a, 'b, 'c, 'd, 'e, 'f, 'g)) => 'callback = "useCallback"
+}
+
+@set
+external setDisplayName: (component<'props>, string) => unit = "displayName"
+
+@get @return(nullable)
+external displayName: component<'props> => option<string> = "displayName"
diff --git a/tests/build_tests/jsx_settings_inheritance/node_modules/@rescript/react/src/ReactDOM.mjs b/tests/build_tests/jsx_settings_inheritance/node_modules/@rescript/react/src/ReactDOM.mjs
new file mode 100644
index 0000000000..531f41295f
--- /dev/null
+++ b/tests/build_tests/jsx_settings_inheritance/node_modules/@rescript/react/src/ReactDOM.mjs
@@ -0,0 +1,18 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+'use strict';
+
+
+let Root = {};
+
+let Client = {
+  Root: Root
+};
+
+let Ref = {};
+
+let Props = {};
+
+exports.Client = Client;
+exports.Ref = Ref;
+exports.Props = Props;
+/* No side effect */
diff --git a/tests/build_tests/jsx_settings_inheritance/node_modules/@rescript/react/src/ReactDOM.res b/tests/build_tests/jsx_settings_inheritance/node_modules/@rescript/react/src/ReactDOM.res
new file mode 100644
index 0000000000..c406b220e9
--- /dev/null
+++ b/tests/build_tests/jsx_settings_inheritance/node_modules/@rescript/react/src/ReactDOM.res
@@ -0,0 +1,950 @@
+/* First time reading a ReScript file? */
+/* `external` is the foreign function call in OCaml. */
+/* here we're saying `I guarantee that on the JS side, we have a `render` function in the module "react-dom"
+ that takes in a reactElement, a dom element, and returns unit (nothing) */
+/* It's like `let`, except you're pointing the implementation to the JS side. The compiler will inline these
+ calls and add the appropriate `require("react-dom")` in the file calling this `render` */
+
+// Helper so that ReactDOM itself doesn't bring any runtime
+@val @return(nullable)
+external querySelector: string => option<Dom.element> = "document.querySelector"
+
+@module("react-dom")
+@deprecated(
+  "ReactDOM.render is no longer supported in React 18. Use ReactDOM.Client.createRoot instead."
+)
+external render: (React.element, Dom.element) => unit = "render"
+
+module Client = {
+  module Root = {
+    type t
+
+    @send external render: (t, React.element) => unit = "render"
+
+    @send external unmount: (t, unit) => unit = "unmount"
+  }
+
+  @module("react-dom/client")
+  external createRoot: Dom.element => Root.t = "createRoot"
+
+  @module("react-dom/client")
+  external hydrateRoot: (Dom.element, React.element) => Root.t = "hydrateRoot"
+}
+
+@module("react-dom")
+@deprecated(
+  "ReactDOM.hydrate is no longer supported in React 18. Use ReactDOM.Client.hydrateRoot instead."
+)
+external hydrate: (React.element, Dom.element) => unit = "hydrate"
+
+@module("react-dom")
+external createPortal: (React.element, Dom.element) => React.element = "createPortal"
+
+@module("react-dom")
+@deprecated(
+  "ReactDOM.unmountComponentAtNode is no longer supported in React 18. Use ReactDOM.Client.Root.unmount instead."
+)
+external unmountComponentAtNode: Dom.element => unit = "unmountComponentAtNode"
+
+external domElementToObj: Dom.element => {..} = "%identity"
+
+type domRef = JsxDOM.domRef
+
+module Ref = {
+  type t = domRef
+  type currentDomRef = React.ref<Js.nullable<Dom.element>>
+  type callbackDomRef = Js.nullable<Dom.element> => unit
+
+  external domRef: currentDomRef => domRef = "%identity"
+  external callbackDomRef: callbackDomRef => domRef = "%identity"
+}
+
+type domProps = JsxDOM.domProps
+
+@deprecated("Please use type ReactDOM.domProps")
+type props = JsxDOM.domProps
+
+module Props = {
+  @deprecated("Please use type ReactDOM.domProps")
+  type domProps = JsxDOM.domProps
+
+  /** DEPRECATED */
+  @deriving(abstract)
+  @deprecated("Please use type ReactDOM.domProps")
+  type props = {
+    @optional
+    key: string,
+    @optional
+    ref: Js.nullable<Dom.element> => unit,
+    /* accessibility */
+    /* https://www.w3.org/TR/wai-aria-1.1/ */
+    /* https://accessibilityresources.org/<aria-tag> is a great resource for these */
+    /* [@optional] [@as "aria-current"] ariaCurrent: page|step|location|date|time|true|false, */
+    @optional @as("aria-details")
+    ariaDetails: string,
+    @optional @as("aria-disabled")
+    ariaDisabled: bool,
+    @optional @as("aria-hidden")
+    ariaHidden: bool,
+    /* [@optional] [@as "aria-invalid"] ariaInvalid: grammar|false|spelling|true, */
+    @optional @as("aria-keyshortcuts")
+    ariaKeyshortcuts: string,
+    @optional @as("aria-label")
+    ariaLabel: string,
+    @optional @as("aria-roledescription")
+    ariaRoledescription: string,
+    /* Widget Attributes */
+    /* [@optional] [@as "aria-autocomplete"] ariaAutocomplete: inline|list|both|none, */
+    /* [@optional] [@as "aria-checked"] ariaChecked: true|false|mixed, /* https://www.w3.org/TR/wai-aria-1.1/#valuetype_tristate */ */
+    @optional @as("aria-expanded")
+    ariaExpanded: bool,
+    /* [@optional] [@as "aria-haspopup"] ariaHaspopup: false|true|menu|listbox|tree|grid|dialog, */
+    @optional @as("aria-level")
+    ariaLevel: int,
+    @optional @as("aria-modal")
+    ariaModal: bool,
+    @optional @as("aria-multiline")
+    ariaMultiline: bool,
+    @optional @as("aria-multiselectable")
+    ariaMultiselectable: bool,
+    /* [@optional] [@as "aria-orientation"] ariaOrientation: horizontal|vertical|undefined, */
+    @optional @as("aria-placeholder")
+    ariaPlaceholder: string,
+    /* [@optional] [@as "aria-pressed"] ariaPressed: true|false|mixed, /* https://www.w3.org/TR/wai-aria-1.1/#valuetype_tristate */ */
+    @optional @as("aria-readonly")
+    ariaReadonly: bool,
+    @optional @as("aria-required")
+    ariaRequired: bool,
+    @optional @as("aria-selected")
+    ariaSelected: bool,
+    @optional @as("aria-sort")
+    ariaSort: string,
+    @optional @as("aria-valuemax")
+    ariaValuemax: float,
+    @optional @as("aria-valuemin")
+    ariaValuemin: float,
+    @optional @as("aria-valuenow")
+    ariaValuenow: float,
+    @optional @as("aria-valuetext")
+    ariaValuetext: string,
+    /* Live Region Attributes */
+    @optional @as("aria-atomic")
+    ariaAtomic: bool,
+    @optional @as("aria-busy")
+    ariaBusy: bool,
+    /* [@optional] [@as "aria-live"] ariaLive: off|polite|assertive|rude, */
+    @optional @as("aria-relevant")
+    ariaRelevant: string,
+    /* Drag-and-Drop Attributes */
+    /* [@optional] [@as "aria-dropeffect"] ariaDropeffect: copy|move|link|execute|popup|none, */
+    @optional @as("aria-grabbed")
+    ariaGrabbed: bool,
+    /* Relationship Attributes */
+    @optional @as("aria-activedescendant")
+    ariaActivedescendant: string,
+    @optional @as("aria-colcount")
+    ariaColcount: int,
+    @optional @as("aria-colindex")
+    ariaColindex: int,
+    @optional @as("aria-colspan")
+    ariaColspan: int,
+    @optional @as("aria-controls")
+    ariaControls: string,
+    @optional @as("aria-describedby")
+    ariaDescribedby: string,
+    @optional @as("aria-errormessage")
+    ariaErrormessage: string,
+    @optional @as("aria-flowto")
+    ariaFlowto: string,
+    @optional @as("aria-labelledby")
+    ariaLabelledby: string,
+    @optional @as("aria-owns")
+    ariaOwns: string,
+    @optional @as("aria-posinset")
+    ariaPosinset: int,
+    @optional @as("aria-rowcount")
+    ariaRowcount: int,
+    @optional @as("aria-rowindex")
+    ariaRowindex: int,
+    @optional @as("aria-rowspan")
+    ariaRowspan: int,
+    @optional @as("aria-setsize")
+    ariaSetsize: int,
+    /* react textarea/input */
+    @optional
+    defaultChecked: bool,
+    @optional
+    defaultValue: string,
+    /* global html attributes */
+    @optional
+    accessKey: string,
+    @optional
+    className: string /* substitute for "class" */,
+    @optional
+    contentEditable: bool,
+    @optional
+    contextMenu: string,
+    @optional
+    dir: string /* "ltr", "rtl" or "auto" */,
+    @optional
+    draggable: bool,
+    @optional
+    hidden: bool,
+    @optional
+    id: string,
+    @optional
+    lang: string,
+    @optional
+    role: string /* ARIA role */,
+    @optional
+    spellCheck: bool,
+    @optional
+    tabIndex: int,
+    @optional
+    title: string,
+    /* html5 microdata */
+    @optional
+    itemID: string,
+    @optional
+    itemProp: string,
+    @optional
+    itemRef: string,
+    @optional
+    itemScope: bool,
+    @optional
+    itemType: string /* uri */,
+    /* tag-specific html attributes */
+    @optional
+    accept: string,
+    @optional
+    acceptCharset: string,
+    @optional
+    action: string /* uri */,
+    @optional
+    allow: string,
+    @optional
+    allowFullScreen: bool,
+    @optional
+    alt: string,
+    @optional
+    async: bool,
+    @optional
+    autoComplete: string /* has a fixed, but large-ish, set of possible values */,
+    @optional
+    autoCapitalize: string /* Mobile Safari specific */,
+    @optional
+    autoFocus: bool,
+    @optional
+    autoPlay: bool,
+    @optional
+    challenge: string,
+    @optional
+    charSet: string,
+    @optional
+    checked: bool,
+    @optional
+    cite: string /* uri */,
+    @optional
+    crossorigin: bool,
+    @optional
+    cols: int,
+    @optional
+    colSpan: int,
+    @optional
+    content: string,
+    @optional
+    controls: bool,
+    @optional
+    coords: string /* set of values specifying the coordinates of a region */,
+    @optional
+    data: string /* uri */,
+    @optional
+    dateTime: string /* "valid date string with optional time" */,
+    @optional
+    default: bool,
+    @optional
+    defer: bool,
+    @optional
+    disabled: bool,
+    @optional
+    download: string /* should really be either a boolean, signifying presence, or a string */,
+    @optional
+    encType: string /* "application/x-www-form-urlencoded", "multipart/form-data" or "text/plain" */,
+    @optional
+    form: string,
+    @optional
+    formAction: string /* uri */,
+    @optional
+    formTarget: string /* "_blank", "_self", etc. */,
+    @optional
+    formMethod: string /* "post", "get", "put" */,
+    @optional
+    frameBorder: int /* deprecated, prefer to use css border instead */,
+    @optional
+    headers: string,
+    @optional
+    height: string /* in html5 this can only be a number, but in html4 it can ba a percentage as well */,
+    @optional
+    high: int,
+    @optional
+    href: string /* uri */,
+    @optional
+    hrefLang: string,
+    @optional
+    htmlFor: string /* substitute for "for" */,
+    @optional
+    httpEquiv: string /* has a fixed set of possible values */,
+    @optional
+    icon: string /* uri? */,
+    @optional
+    inputMode: string /* "verbatim", "latin", "numeric", etc. */,
+    @optional
+    integrity: string,
+    @optional
+    keyType: string,
+    @optional
+    kind: string /* has a fixed set of possible values */,
+    @optional
+    label: string,
+    @optional
+    list: string,
+    @optional
+    loop: bool,
+    @optional
+    low: int,
+    @optional
+    manifest: string /* uri */,
+    @optional
+    max: string /* should be int or Js.Date.t */,
+    @optional
+    maxLength: int,
+    @optional
+    media: string /* a valid media query */,
+    @optional
+    mediaGroup: string,
+    @optional
+    method: string /* "post" or "get" */,
+    @optional
+    min: string,
+    @optional
+    minLength: int,
+    @optional
+    multiple: bool,
+    @optional
+    muted: bool,
+    @optional
+    name: string,
+    @optional
+    nonce: string,
+    @optional
+    noValidate: bool,
+    @optional @as("open")
+    open_: bool /* use this one. Previous one is deprecated */,
+    @optional
+    optimum: int,
+    @optional
+    pattern: string /* valid Js RegExp */,
+    @optional
+    placeholder: string,
+    @optional
+    poster: string /* uri */,
+    @optional
+    preload: string /* "none", "metadata" or "auto" (and "" as a synonym for "auto") */,
+    @optional
+    radioGroup: string,
+    @optional
+    readOnly: bool,
+    @optional
+    rel: string /* a space- or comma-separated (depending on the element) list of a fixed set of "link types" */,
+    @optional
+    required: bool,
+    @optional
+    reversed: bool,
+    @optional
+    rows: int,
+    @optional
+    rowSpan: int,
+    @optional
+    sandbox: string /* has a fixed set of possible values */,
+    @optional
+    scope: string /* has a fixed set of possible values */,
+    @optional
+    scoped: bool,
+    @optional
+    scrolling: string /* html4 only, "auto", "yes" or "no" */,
+    /* seamless - supported by React, but removed from the html5 spec */
+    @optional
+    selected: bool,
+    @optional
+    shape: string,
+    @optional
+    size: int,
+    @optional
+    sizes: string,
+    @optional
+    span: int,
+    @optional
+    src: string /* uri */,
+    @optional
+    srcDoc: string,
+    @optional
+    srcLang: string,
+    @optional
+    srcSet: string,
+    @optional
+    start: int,
+    @optional
+    step: float,
+    @optional
+    summary: string /* deprecated */,
+    @optional
+    target: string,
+    @optional @as("type")
+    type_: string /* has a fixed but large-ish set of possible values */ /* use this one. Previous one is deprecated */,
+    @optional
+    useMap: string,
+    @optional
+    value: string,
+    @optional
+    width: string /* in html5 this can only be a number, but in html4 it can ba a percentage as well */,
+    @optional
+    wrap: string /* "hard" or "soft" */,
+    /* svg */
+    @optional
+    accentHeight: string,
+    @optional
+    accumulate: string,
+    @optional
+    additive: string,
+    @optional
+    alignmentBaseline: string,
+    @optional
+    allowReorder: string,
+    @optional
+    alphabetic: string,
+    @optional
+    amplitude: string,
+    @optional
+    arabicForm: string,
+    @optional
+    ascent: string,
+    @optional
+    attributeName: string,
+    @optional
+    attributeType: string,
+    @optional
+    autoReverse: string,
+    @optional
+    azimuth: string,
+    @optional
+    baseFrequency: string,
+    @optional
+    baseProfile: string,
+    @optional
+    baselineShift: string,
+    @optional
+    bbox: string,
+    @optional @as("begin")
+    begin_: string /* use this one. Previous one is deprecated */,
+    @optional
+    bias: string,
+    @optional
+    by: string,
+    @optional
+    calcMode: string,
+    @optional
+    capHeight: string,
+    @optional
+    clip: string,
+    @optional
+    clipPath: string,
+    @optional
+    clipPathUnits: string,
+    @optional
+    clipRule: string,
+    @optional
+    colorInterpolation: string,
+    @optional
+    colorInterpolationFilters: string,
+    @optional
+    colorProfile: string,
+    @optional
+    colorRendering: string,
+    @optional
+    contentScriptType: string,
+    @optional
+    contentStyleType: string,
+    @optional
+    cursor: string,
+    @optional
+    cx: string,
+    @optional
+    cy: string,
+    @optional
+    d: string,
+    @optional
+    decelerate: string,
+    @optional
+    descent: string,
+    @optional
+    diffuseConstant: string,
+    @optional
+    direction: string,
+    @optional
+    display: string,
+    @optional
+    divisor: string,
+    @optional
+    dominantBaseline: string,
+    @optional
+    dur: string,
+    @optional
+    dx: string,
+    @optional
+    dy: string,
+    @optional
+    edgeMode: string,
+    @optional
+    elevation: string,
+    @optional
+    enableBackground: string,
+    @optional @as("end")
+    end_: string /* use this one. Previous one is deprecated */,
+    @optional
+    exponent: string,
+    @optional
+    externalResourcesRequired: string,
+    @optional
+    fill: string,
+    @optional
+    fillOpacity: string,
+    @optional
+    fillRule: string,
+    @optional
+    filter: string,
+    @optional
+    filterRes: string,
+    @optional
+    filterUnits: string,
+    @optional
+    floodColor: string,
+    @optional
+    floodOpacity: string,
+    @optional
+    focusable: string,
+    @optional
+    fontFamily: string,
+    @optional
+    fontSize: string,
+    @optional
+    fontSizeAdjust: string,
+    @optional
+    fontStretch: string,
+    @optional
+    fontStyle: string,
+    @optional
+    fontVariant: string,
+    @optional
+    fontWeight: string,
+    @optional
+    fomat: string,
+    @optional
+    from: string,
+    @optional
+    fx: string,
+    @optional
+    fy: string,
+    @optional
+    g1: string,
+    @optional
+    g2: string,
+    @optional
+    glyphName: string,
+    @optional
+    glyphOrientationHorizontal: string,
+    @optional
+    glyphOrientationVertical: string,
+    @optional
+    glyphRef: string,
+    @optional
+    gradientTransform: string,
+    @optional
+    gradientUnits: string,
+    @optional
+    hanging: string,
+    @optional
+    horizAdvX: string,
+    @optional
+    horizOriginX: string,
+    @optional
+    ideographic: string,
+    @optional
+    imageRendering: string,
+    @optional @as("in")
+    in_: string /* use this one. Previous one is deprecated */,
+    @optional
+    in2: string,
+    @optional
+    intercept: string,
+    @optional
+    k: string,
+    @optional
+    k1: string,
+    @optional
+    k2: string,
+    @optional
+    k3: string,
+    @optional
+    k4: string,
+    @optional
+    kernelMatrix: string,
+    @optional
+    kernelUnitLength: string,
+    @optional
+    kerning: string,
+    @optional
+    keyPoints: string,
+    @optional
+    keySplines: string,
+    @optional
+    keyTimes: string,
+    @optional
+    lengthAdjust: string,
+    @optional
+    letterSpacing: string,
+    @optional
+    lightingColor: string,
+    @optional
+    limitingConeAngle: string,
+    @optional
+    local: string,
+    @optional
+    markerEnd: string,
+    @optional
+    markerHeight: string,
+    @optional
+    markerMid: string,
+    @optional
+    markerStart: string,
+    @optional
+    markerUnits: string,
+    @optional
+    markerWidth: string,
+    @optional
+    mask: string,
+    @optional
+    maskContentUnits: string,
+    @optional
+    maskUnits: string,
+    @optional
+    mathematical: string,
+    @optional
+    mode: string,
+    @optional
+    numOctaves: string,
+    @optional
+    offset: string,
+    @optional
+    opacity: string,
+    @optional
+    operator: string,
+    @optional
+    order: string,
+    @optional
+    orient: string,
+    @optional
+    orientation: string,
+    @optional
+    origin: string,
+    @optional
+    overflow: string,
+    @optional
+    overflowX: string,
+    @optional
+    overflowY: string,
+    @optional
+    overlinePosition: string,
+    @optional
+    overlineThickness: string,
+    @optional
+    paintOrder: string,
+    @optional
+    panose1: string,
+    @optional
+    pathLength: string,
+    @optional
+    patternContentUnits: string,
+    @optional
+    patternTransform: string,
+    @optional
+    patternUnits: string,
+    @optional
+    pointerEvents: string,
+    @optional
+    points: string,
+    @optional
+    pointsAtX: string,
+    @optional
+    pointsAtY: string,
+    @optional
+    pointsAtZ: string,
+    @optional
+    preserveAlpha: string,
+    @optional
+    preserveAspectRatio: string,
+    @optional
+    primitiveUnits: string,
+    @optional
+    r: string,
+    @optional
+    radius: string,
+    @optional
+    refX: string,
+    @optional
+    refY: string,
+    @optional
+    renderingIntent: string,
+    @optional
+    repeatCount: string,
+    @optional
+    repeatDur: string,
+    @optional
+    requiredExtensions: string,
+    @optional
+    requiredFeatures: string,
+    @optional
+    restart: string,
+    @optional
+    result: string,
+    @optional
+    rotate: string,
+    @optional
+    rx: string,
+    @optional
+    ry: string,
+    @optional
+    scale: string,
+    @optional
+    seed: string,
+    @optional
+    shapeRendering: string,
+    @optional
+    slope: string,
+    @optional
+    spacing: string,
+    @optional
+    specularConstant: string,
+    @optional
+    specularExponent: string,
+    @optional
+    speed: string,
+    @optional
+    spreadMethod: string,
+    @optional
+    startOffset: string,
+    @optional
+    stdDeviation: string,
+    @optional
+    stemh: string,
+    @optional
+    stemv: string,
+    @optional
+    stitchTiles: string,
+    @optional
+    stopColor: string,
+    @optional
+    stopOpacity: string,
+    @optional
+    strikethroughPosition: string,
+    @optional
+    strikethroughThickness: string,
+    @optional
+    string: string,
+    @optional
+    stroke: string,
+    @optional
+    strokeDasharray: string,
+    @optional
+    strokeDashoffset: string,
+    @optional
+    strokeLinecap: string,
+    @optional
+    strokeLinejoin: string,
+    @optional
+    strokeMiterlimit: string,
+    @optional
+    strokeOpacity: string,
+    @optional
+    strokeWidth: string,
+    @optional
+    surfaceScale: string,
+    @optional
+    systemLanguage: string,
+    @optional
+    tableValues: string,
+    @optional
+    targetX: string,
+    @optional
+    targetY: string,
+    @optional
+    textAnchor: string,
+    @optional
+    textDecoration: string,
+    @optional
+    textLength: string,
+    @optional
+    textRendering: string,
+    @optional @as("to")
+    to_: string /* use this one. Previous one is deprecated */,
+    @optional
+    transform: string,
+    @optional
+    u1: string,
+    @optional
+    u2: string,
+    @optional
+    underlinePosition: string,
+    @optional
+    underlineThickness: string,
+    @optional
+    unicode: string,
+    @optional
+    unicodeBidi: string,
+    @optional
+    unicodeRange: string,
+    @optional
+    unitsPerEm: string,
+    @optional
+    vAlphabetic: string,
+    @optional
+    vHanging: string,
+    @optional
+    vIdeographic: string,
+    @optional
+    vMathematical: string,
+    @optional
+    values: string,
+    @optional
+    vectorEffect: string,
+    @optional
+    version: string,
+    @optional
+    vertAdvX: string,
+    @optional
+    vertAdvY: string,
+    @optional
+    vertOriginX: string,
+    @optional
+    vertOriginY: string,
+    @optional
+    viewBox: string,
+    @optional
+    viewTarget: string,
+    @optional
+    visibility: string,
+    /* width::string? => */
+    @optional
+    widths: string,
+    @optional
+    wordSpacing: string,
+    @optional
+    writingMode: string,
+    @optional
+    x: string,
+    @optional
+    x1: string,
+    @optional
+    x2: string,
+    @optional
+    xChannelSelector: string,
+    @optional
+    xHeight: string,
+    @optional
+    xlinkActuate: string,
+    @optional
+    xlinkArcrole: string,
+    @optional
+    xlinkHref: string,
+    @optional
+    xlinkRole: string,
+    @optional
+    xlinkShow: string,
+    @optional
+    xlinkTitle: string,
+    @optional
+    xlinkType: string,
+    @optional
+    xmlns: string,
+    @optional
+    xmlnsXlink: string,
+    @optional
+    xmlBase: string,
+    @optional
+    xmlLang: string,
+    @optional
+    xmlSpace: string,
+    @optional
+    y: string,
+    @optional
+    y1: string,
+    @optional
+    y2: string,
+    @optional
+    yChannelSelector: string,
+    @optional
+    z: string,
+    @optional
+    zoomAndPan: string,
+    /* RDFa */
+    @optional
+    about: string,
+    @optional
+    datatype: string,
+    @optional
+    inlist: string,
+    @optional
+    prefix: string,
+    @optional
+    property: string,
+    @optional
+    resource: string,
+    @optional
+    typeof: string,
+    @optional
+    vocab: string,
+    /* react-specific */
+    @optional
+    dangerouslySetInnerHTML: {"__html": string},
+    @optional
+    suppressContentEditableWarning: bool,
+  }
+}
+
+@variadic @module("react")
+external createElement: (string, ~props: domProps=?, array<React.element>) => React.element =
+  "createElement"
+
+@variadic @module("react")
+external createDOMElementVariadic: (
+  string,
+  ~props: domProps=?,
+  array<React.element>,
+) => React.element = "createElement"
+
+external someElement: React.element => option<React.element> = "%identity"
+
+@module("react/jsx-runtime")
+external jsx: (string, JsxDOM.domProps) => Jsx.element = "jsx"
+
+@module("react/jsx-runtime")
+external jsxKeyed: (string, JsxDOM.domProps, ~key: string=?, @ignore unit) => Jsx.element = "jsx"
+
+@module("react/jsx-runtime")
+external jsxs: (string, JsxDOM.domProps) => Jsx.element = "jsxs"
+
+@module("react/jsx-runtime")
+external jsxsKeyed: (string, JsxDOM.domProps, ~key: string=?, @ignore unit) => Jsx.element = "jsxs"
+
+// Currently, not used by JSX ppx
+@deprecated("Please use ReactDOM.createElement instead.")
+external stringToComponent: string => React.component<'a> = "%identity"
diff --git a/tests/build_tests/jsx_settings_inheritance/node_modules/a/package.json b/tests/build_tests/jsx_settings_inheritance/node_modules/a/package.json
new file mode 100644
index 0000000000..db9848a748
--- /dev/null
+++ b/tests/build_tests/jsx_settings_inheritance/node_modules/a/package.json
@@ -0,0 +1,4 @@
+{
+    "name": "a",
+    "version": "0.0.0"
+}
\ No newline at end of file
diff --git a/tests/build_tests/jsx_settings_inheritance/node_modules/a/rescript.json b/tests/build_tests/jsx_settings_inheritance/node_modules/a/rescript.json
new file mode 100644
index 0000000000..a9aad4cff9
--- /dev/null
+++ b/tests/build_tests/jsx_settings_inheritance/node_modules/a/rescript.json
@@ -0,0 +1,22 @@
+{
+  "name": "a",
+  "jsx": {
+    "version": 4,
+    "mode": "classic"
+  },
+  "sources": {
+    "dir": "src",
+    "subdirs": true
+  },
+  "package-specs": [
+    {
+      "module": "commonjs",
+      "in-source": true
+    }
+  ],
+  "suffix": ".mjs",
+  "namespace": true,
+  "bs-dependencies": [
+    "@rescript/react"
+  ]
+}
\ No newline at end of file
diff --git a/tests/build_tests/jsx_settings_inheritance/node_modules/a/src/A.mjs b/tests/build_tests/jsx_settings_inheritance/node_modules/a/src/A.mjs
new file mode 100644
index 0000000000..87355093a9
--- /dev/null
+++ b/tests/build_tests/jsx_settings_inheritance/node_modules/a/src/A.mjs
@@ -0,0 +1,13 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+'use strict';
+
+let React = require("react");
+
+function A(props) {
+  return React.createElement("div", undefined, "This is A");
+}
+
+let make = A;
+
+exports.make = make;
+/* react Not a pure module */
diff --git a/tests/build_tests/jsx_settings_inheritance/node_modules/a/src/A.res b/tests/build_tests/jsx_settings_inheritance/node_modules/a/src/A.res
new file mode 100644
index 0000000000..5608f3dba9
--- /dev/null
+++ b/tests/build_tests/jsx_settings_inheritance/node_modules/a/src/A.res
@@ -0,0 +1,4 @@
+@react.component
+let make = () => {
+  <div> {"This is A"->React.string} </div>
+}
diff --git a/tests/build_tests/jsx_settings_inheritance/node_modules/b/package.json b/tests/build_tests/jsx_settings_inheritance/node_modules/b/package.json
new file mode 100644
index 0000000000..e460ee99f9
--- /dev/null
+++ b/tests/build_tests/jsx_settings_inheritance/node_modules/b/package.json
@@ -0,0 +1,4 @@
+{
+    "name": "b",
+    "version": "0.0.0"
+}
\ No newline at end of file
diff --git a/tests/build_tests/jsx_settings_inheritance/node_modules/b/rescript.json b/tests/build_tests/jsx_settings_inheritance/node_modules/b/rescript.json
new file mode 100644
index 0000000000..da3c68d2cd
--- /dev/null
+++ b/tests/build_tests/jsx_settings_inheritance/node_modules/b/rescript.json
@@ -0,0 +1,18 @@
+{
+  "name": "b",
+  "sources": {
+    "dir": "src",
+    "subdirs": true
+  },
+  "package-specs": [
+    {
+      "module": "commonjs",
+      "in-source": true
+    }
+  ],
+  "suffix": ".mjs",
+  "namespace": true,
+  "bs-dependencies": [
+    "@rescript/react"
+  ]
+}
\ No newline at end of file
diff --git a/tests/build_tests/jsx_settings_inheritance/node_modules/b/src/B.mjs b/tests/build_tests/jsx_settings_inheritance/node_modules/b/src/B.mjs
new file mode 100644
index 0000000000..85e5b19562
--- /dev/null
+++ b/tests/build_tests/jsx_settings_inheritance/node_modules/b/src/B.mjs
@@ -0,0 +1,15 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+'use strict';
+
+let JsxRuntime = require("react/jsx-runtime");
+
+function B(props) {
+  return JsxRuntime.jsx("div", {
+    children: "This is B"
+  });
+}
+
+let make = B;
+
+exports.make = make;
+/* react/jsx-runtime Not a pure module */
diff --git a/tests/build_tests/jsx_settings_inheritance/node_modules/b/src/B.res b/tests/build_tests/jsx_settings_inheritance/node_modules/b/src/B.res
new file mode 100644
index 0000000000..dacf26fad7
--- /dev/null
+++ b/tests/build_tests/jsx_settings_inheritance/node_modules/b/src/B.res
@@ -0,0 +1,4 @@
+@react.component
+let make = () => {
+  <div> {"This is B"->React.string} </div>
+}
diff --git a/tests/build_tests/jsx_settings_inheritance/rescript.json b/tests/build_tests/jsx_settings_inheritance/rescript.json
new file mode 100644
index 0000000000..bedc0f0d67
--- /dev/null
+++ b/tests/build_tests/jsx_settings_inheritance/rescript.json
@@ -0,0 +1,24 @@
+{
+  "name": "jsx-settings-inheritance",
+  "jsx": {
+    "version": 4,
+    "mode": "automatic"
+  },
+  "sources": {
+    "dir": "src",
+    "subdirs": true
+  },
+  "package-specs": [
+    {
+      "module": "commonjs",
+      "in-source": true
+    }
+  ],
+  "suffix": ".mjs",
+  "namespace": true,
+  "bs-dependencies": [
+    "@rescript/react",
+    "a",
+    "b"
+  ]
+}
\ No newline at end of file
diff --git a/tests/build_tests/jsx_settings_inheritance/src/C.mjs b/tests/build_tests/jsx_settings_inheritance/src/C.mjs
new file mode 100644
index 0000000000..8904c9bed0
--- /dev/null
+++ b/tests/build_tests/jsx_settings_inheritance/src/C.mjs
@@ -0,0 +1,20 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+'use strict';
+
+let A$A = require("a/src/A.mjs");
+let B$B = require("b/src/B.mjs");
+let JsxRuntime = require("react/jsx-runtime");
+
+function C(props) {
+  return JsxRuntime.jsxs(JsxRuntime.Fragment, {
+    children: [
+      JsxRuntime.jsx(A$A.make, {}),
+      JsxRuntime.jsx(B$B.make, {})
+    ]
+  });
+}
+
+let make = C;
+
+exports.make = make;
+/* A-A Not a pure module */
diff --git a/tests/build_tests/jsx_settings_inheritance/src/C.res b/tests/build_tests/jsx_settings_inheritance/src/C.res
new file mode 100644
index 0000000000..037d4e7239
--- /dev/null
+++ b/tests/build_tests/jsx_settings_inheritance/src/C.res
@@ -0,0 +1,7 @@
+@react.component
+let make = () => {
+  <>
+    <A.A />
+    <B.B />
+  </>
+}