diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0726b8a5..53e9f919 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -27,6 +27,7 @@
 - Fix location issue in error messages with JSX V4 where the body of the component is an application https://github.com/rescript-lang/syntax/pull/633
 - Fix issue where the printer would omit attributes for `->` and `|>` https://github.com/rescript-lang/syntax/pull/629
 - Fix printing of optional fields in records https://github.com/rescript-lang/rescript-compiler/issues/5654
+- Fix location issue in error messages with JSX V4 where the multiple props types are defined https://github.com/rescript-lang/syntax/pull/655
 
 ## ReScript 10.0
 
diff --git a/cli/JSXV4.md b/cli/JSXV4.md
index 93cd23e2..c3b92b01 100644
--- a/cli/JSXV4.md
+++ b/cli/JSXV4.md
@@ -257,6 +257,8 @@ type props<'x, 'y, 'z> = {x: 'x, y?: 'y, z?: 'z}
 }
 ```
 
+If there is any type with the same name of `props`, it needs to be renamed to avoid the error of the multiple definitions of the type name.
+
 ### Component Application
 
 ```rescript
diff --git a/cli/reactjs_jsx_v4.ml b/cli/reactjs_jsx_v4.ml
index 6fc00671..e11b6f96 100644
--- a/cli/reactjs_jsx_v4.ml
+++ b/cli/reactjs_jsx_v4.ml
@@ -751,7 +751,7 @@ let transformStructureItem ~config mapper item =
         in
         (* type props<'x, 'y> = { x: 'x, y?: 'y, ... } *)
         let propsRecordType =
-          makePropsRecordType "props" Location.none namedTypeList
+          makePropsRecordType "props" pstr_loc namedTypeList
         in
         (* can't be an arrow because it will defensively uncurry *)
         let newExternalType =
@@ -975,7 +975,7 @@ let transformStructureItem ~config mapper item =
           let vbMatchList = List.map vbMatch namedArgWithDefaultValueList in
           (* type props = { ... } *)
           let propsRecordType =
-            makePropsRecordType "props" emptyLoc namedTypeList
+            makePropsRecordType "props" pstr_loc namedTypeList
           in
           let innerExpression =
             Exp.apply
@@ -1197,7 +1197,7 @@ let transformSignatureItem ~config _mapper item =
           (makePropsTypeParams namedTypeList)
       in
       let propsRecordType =
-        makePropsRecordTypeSig "props" Location.none
+        makePropsRecordTypeSig "props" psig_loc
           ((* If there is Nolabel arg, regard the type as ref in forwardRef *)
            (if !hasForwardRef then [(true, "ref", [], refType Location.none)]
            else [])
diff --git a/tests/ppx/react/expected/commentAtTop.res.txt b/tests/ppx/react/expected/commentAtTop.res.txt
index a8b54927..4ccf56e8 100644
--- a/tests/ppx/react/expected/commentAtTop.res.txt
+++ b/tests/ppx/react/expected/commentAtTop.res.txt
@@ -1,4 +1,6 @@
-type props<'msg> = {msg: 'msg} // test React JSX file
+type props<'msg> = { // test React JSX file
+  msg: 'msg,
+}
 
 @react.component
 let make = ({msg, _}: props<'msg>) => {
diff --git a/tests/ppx/react/expected/externalWithCustomName.res.txt b/tests/ppx/react/expected/externalWithCustomName.res.txt
index 335c670f..a4fd91d6 100644
--- a/tests/ppx/react/expected/externalWithCustomName.res.txt
+++ b/tests/ppx/react/expected/externalWithCustomName.res.txt
@@ -13,7 +13,10 @@ let t = React.createElement(Foo.component, Foo.componentProps(~a=1, ~b={"1"}, ()
 @@jsxConfig({version: 4, mode: "classic"})
 
 module Foo = {
-  type props<'a, 'b> = {a: 'a, b: 'b}
+  type props<'a, 'b> = {
+    a: 'a,
+    b: 'b,
+  }
 
   @module("Foo")
   external component: React.componentLike<props<int, string>, React.element> = "component"
@@ -24,7 +27,10 @@ let t = React.createElement(Foo.component, {a: 1, b: "1"})
 @@jsxConfig({version: 4, mode: "automatic"})
 
 module Foo = {
-  type props<'a, 'b> = {a: 'a, b: 'b}
+  type props<'a, 'b> = {
+    a: 'a,
+    b: 'b,
+  }
 
   @module("Foo")
   external component: React.componentLike<props<int, string>, React.element> = "component"
diff --git a/tests/ppx/react/expected/externalWithRef.res.txt b/tests/ppx/react/expected/externalWithRef.res.txt
index ab8e5a32..dd64f13c 100644
--- a/tests/ppx/react/expected/externalWithRef.res.txt
+++ b/tests/ppx/react/expected/externalWithRef.res.txt
@@ -18,7 +18,10 @@ module V3 = {
 @@jsxConfig({version: 4, mode: "classic"})
 
 module V4C = {
-  type props<'x, 'ref> = {x: 'x, ref?: 'ref}
+  type props<'x, 'ref> = {
+    x: 'x,
+    ref?: 'ref,
+  }
 
   @module("componentForwardRef")
   external make: React.componentLike<props<string, ReactDOM.Ref.currentDomRef>, React.element> =
@@ -28,7 +31,10 @@ module V4C = {
 @@jsxConfig({version: 4, mode: "automatic"})
 
 module V4C = {
-  type props<'x, 'ref> = {x: 'x, ref?: 'ref}
+  type props<'x, 'ref> = {
+    x: 'x,
+    ref?: 'ref,
+  }
 
   @module("componentForwardRef")
   external make: React.componentLike<props<string, ReactDOM.Ref.currentDomRef>, React.element> =
diff --git a/tests/ppx/react/expected/externalWithTypeVariables.res.txt b/tests/ppx/react/expected/externalWithTypeVariables.res.txt
index 0cf3ae24..6850bdde 100644
--- a/tests/ppx/react/expected/externalWithTypeVariables.res.txt
+++ b/tests/ppx/react/expected/externalWithTypeVariables.res.txt
@@ -16,7 +16,10 @@ module V3 = {
 @@jsxConfig({version: 4, mode: "classic"})
 
 module V4C = {
-  type props<'x, 'children> = {x: 'x, children: 'children}
+  type props<'x, 'children> = {
+    x: 'x,
+    children: 'children,
+  }
 
   @module("c")
   external make: React.componentLike<props<t<'a>, React.element>, React.element> = "component"
@@ -25,7 +28,10 @@ module V4C = {
 @@jsxConfig({version: 4, mode: "automatic"})
 
 module V4C = {
-  type props<'x, 'children> = {x: 'x, children: 'children}
+  type props<'x, 'children> = {
+    x: 'x,
+    children: 'children,
+  }
 
   @module("c")
   external make: React.componentLike<props<t<'a>, React.element>, React.element> = "component"
diff --git a/tests/ppx/react/expected/fileLevelConfig.res.txt b/tests/ppx/react/expected/fileLevelConfig.res.txt
index e3dd21a0..185df25c 100644
--- a/tests/ppx/react/expected/fileLevelConfig.res.txt
+++ b/tests/ppx/react/expected/fileLevelConfig.res.txt
@@ -17,7 +17,9 @@ module V3 = {
 @@jsxConfig({version: 4, mode: "classic"})
 
 module V4C = {
-  type props<'msg> = {msg: 'msg}
+  type props<'msg> = {
+    msg: 'msg,
+  }
 
   @react.component
   let make = ({msg, _}: props<'msg>) => {
@@ -33,7 +35,9 @@ module V4C = {
 @@jsxConfig({version: 4, mode: "automatic"})
 
 module V4A = {
-  type props<'msg> = {msg: 'msg}
+  type props<'msg> = {
+    msg: 'msg,
+  }
 
   @react.component
   let make = ({msg, _}: props<'msg>) => {
diff --git a/tests/ppx/react/expected/interface.res.txt b/tests/ppx/react/expected/interface.res.txt
index 9b6062dd..6488424d 100644
--- a/tests/ppx/react/expected/interface.res.txt
+++ b/tests/ppx/react/expected/interface.res.txt
@@ -1,5 +1,7 @@
 module A = {
-  type props<'x> = {x: 'x}
+  type props<'x> = {
+    x: 'x,
+  }
   @react.component let make = ({x, _}: props<'x>) => React.string(x)
   let make = {
     let \"Interface$A" = (props: props<_>) => make(props)
diff --git a/tests/ppx/react/expected/interface.resi.txt b/tests/ppx/react/expected/interface.resi.txt
index f4ffd9b6..0a6e4c2d 100644
--- a/tests/ppx/react/expected/interface.resi.txt
+++ b/tests/ppx/react/expected/interface.resi.txt
@@ -1,5 +1,7 @@
 module A: {
-  type props<'x> = {x: 'x}
+  type props<'x> = {
+    x: 'x,
+  }
   let make: React.componentLike<props<string>, React.element>
 }
 
diff --git a/tests/ppx/react/expected/interfaceWithRef.res.txt b/tests/ppx/react/expected/interfaceWithRef.res.txt
index 7249ceb5..1157c838 100644
--- a/tests/ppx/react/expected/interfaceWithRef.res.txt
+++ b/tests/ppx/react/expected/interfaceWithRef.res.txt
@@ -1,4 +1,7 @@
-type props<'x, 'ref> = {x: 'x, ref?: 'ref}
+type props<'x, 'ref> = {
+  x: 'x,
+  ref?: 'ref,
+}
 @react.component
 let make = (
   {x, _}: props<string, ReactDOM.Ref.currentDomRef>,
diff --git a/tests/ppx/react/expected/interfaceWithRef.resi.txt b/tests/ppx/react/expected/interfaceWithRef.resi.txt
index ee5da3ca..e5f91674 100644
--- a/tests/ppx/react/expected/interfaceWithRef.resi.txt
+++ b/tests/ppx/react/expected/interfaceWithRef.resi.txt
@@ -1,2 +1,5 @@
-type props<'x, 'ref> = {x: 'x, ref?: 'ref}
+type props<'x, 'ref> = {
+  x: 'x,
+  ref?: 'ref,
+}
 let make: React.componentLike<props<string, ReactDOM.Ref.currentDomRef>, React.element>
diff --git a/tests/ppx/react/expected/newtype.res.txt b/tests/ppx/react/expected/newtype.res.txt
index fb810ec5..23c4ac0a 100644
--- a/tests/ppx/react/expected/newtype.res.txt
+++ b/tests/ppx/react/expected/newtype.res.txt
@@ -24,7 +24,11 @@ module V3 = {
 @@jsxConfig({version: 4, mode: "classic"})
 
 module V4C = {
-  type props<'a, 'b, 'c> = {a: 'a, b: 'b, c: 'c}
+  type props<'a, 'b, 'c> = {
+    a: 'a,
+    b: 'b,
+    c: 'c,
+  }
 
   @react.component
   let make = ({a, b, c, _}: props<'\"type-a", array<option<[#Foo('\"type-a")]>>, 'a>) =>
@@ -39,7 +43,11 @@ module V4C = {
 @@jsxConfig({version: 4, mode: "automatic"})
 
 module V4A = {
-  type props<'a, 'b, 'c> = {a: 'a, b: 'b, c: 'c}
+  type props<'a, 'b, 'c> = {
+    a: 'a,
+    b: 'b,
+    c: 'c,
+  }
 
   @react.component
   let make = ({a, b, c, _}: props<'\"type-a", array<option<[#Foo('\"type-a")]>>, 'a>) =>
diff --git a/tests/ppx/react/expected/removedKeyProp.res.txt b/tests/ppx/react/expected/removedKeyProp.res.txt
index 3f1b532b..6f44b028 100644
--- a/tests/ppx/react/expected/removedKeyProp.res.txt
+++ b/tests/ppx/react/expected/removedKeyProp.res.txt
@@ -1,7 +1,10 @@
 @@jsxConfig({version: 4, mode: "classic"})
 
 module Foo = {
-  type props<'x, 'y> = {x: 'x, y: 'y}
+  type props<'x, 'y> = {
+    x: 'x,
+    y: 'y,
+  }
 
   @react.component let make = ({x, y, _}: props<'x, 'y>) => React.string(x ++ y)
   let make = {
@@ -12,7 +15,9 @@ module Foo = {
 }
 
 module HasChildren = {
-  type props<'children> = {children: 'children}
+  type props<'children> = {
+    children: 'children,
+  }
 
   @react.component
   let make = ({children, _}: props<'children>) => ReactDOM.createElement(React.fragment, [children])
diff --git a/tests/ppx/react/expected/topLevel.res.txt b/tests/ppx/react/expected/topLevel.res.txt
index 74ee443f..aedfcdf6 100644
--- a/tests/ppx/react/expected/topLevel.res.txt
+++ b/tests/ppx/react/expected/topLevel.res.txt
@@ -19,7 +19,10 @@ module V3 = {
 @@jsxConfig({version: 4, mode: "classic"})
 
 module V4C = {
-  type props<'a, 'b> = {a: 'a, b: 'b}
+  type props<'a, 'b> = {
+    a: 'a,
+    b: 'b,
+  }
 
   @react.component
   let make = ({a, b, _}: props<'a, 'b>) => {
@@ -36,7 +39,10 @@ module V4C = {
 @@jsxConfig({version: 4, mode: "automatic"})
 
 module V4A = {
-  type props<'a, 'b> = {a: 'a, b: 'b}
+  type props<'a, 'b> = {
+    a: 'a,
+    b: 'b,
+  }
 
   @react.component
   let make = ({a, b, _}: props<'a, 'b>) => {
diff --git a/tests/ppx/react/expected/typeConstraint.res.txt b/tests/ppx/react/expected/typeConstraint.res.txt
index e7b3e483..88b0769f 100644
--- a/tests/ppx/react/expected/typeConstraint.res.txt
+++ b/tests/ppx/react/expected/typeConstraint.res.txt
@@ -17,7 +17,10 @@ module V3 = {
 @@jsxConfig({version: 4, mode: "classic"})
 
 module V4C = {
-  type props<'a, 'b> = {a: 'a, b: 'b}
+  type props<'a, 'b> = {
+    a: 'a,
+    b: 'b,
+  }
 
   @react.component
   let make = ({a, b, _}: props<'\"type-a", '\"type-a">) =>
@@ -32,7 +35,10 @@ module V4C = {
 @@jsxConfig({version: 4, mode: "automatic"})
 
 module V4A = {
-  type props<'a, 'b> = {a: 'a, b: 'b}
+  type props<'a, 'b> = {
+    a: 'a,
+    b: 'b,
+  }
 
   @react.component let make = ({a, b, _}: props<'\"type-a", '\"type-a">) => ReactDOM.jsx("div", {})
   let make = {
diff --git a/tests/ppx/react/expected/v4.res.txt b/tests/ppx/react/expected/v4.res.txt
index fcdd0132..b0e609d5 100644
--- a/tests/ppx/react/expected/v4.res.txt
+++ b/tests/ppx/react/expected/v4.res.txt
@@ -1,4 +1,7 @@
-type props<'x, 'y> = {x: 'x, y: 'y} // Component with type constraint
+type props<'x, 'y> = { // Component with type constraint
+  x: 'x,
+  y: 'y,
+}
 @react.component let make = ({x, y, _}: props<string, string>) => React.string(x ++ y)
 let make = {
   let \"V4" = (props: props<_>) => make(props)
@@ -6,9 +9,11 @@ let make = {
 }
 
 module AnotherName = {
-  type props<'x> = {x: 'x}
+  type // Component with another name than "make"
+  props<'x> = {
+    x: 'x,
+  }
 
-  // Component with another name than "make"
   @react.component let anotherName = ({x, _}: props<'x>) => React.string(x)
   let anotherName = {
     let \"V4$AnotherName$anotherName" = (props: props<_>) => anotherName(props)