diff --git a/CHANGELOG.md b/CHANGELOG.md
index f238068159..eb4e0cd223 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,6 +12,8 @@
 
 # 10.1.0-rc.3
 
+- Fix issue where the JSX key type is not an optional string https://github.com/rescript-lang/syntax/pull/693
+
 # 10.1.0-rc.2
 
 #### :bug: Bug Fix
diff --git a/jscomp/napkin/CHANGELOG.md b/jscomp/napkin/CHANGELOG.md
index 87a36ca1e4..5848015ded 100644
--- a/jscomp/napkin/CHANGELOG.md
+++ b/jscomp/napkin/CHANGELOG.md
@@ -43,6 +43,7 @@
 - Fix several printing issues with `async` including an infinite loop https://github.com/rescript-lang/syntax/pull/680
 - Fix issue where certain JSX expressions would be formatted differenctly in compiler 10.1.0-rc.1 https://github.com/rescript-lang/syntax/issues/675
 - Fix issue where printing nested pipe discards await https://github.com/rescript-lang/syntax/issues/687
+- Fix issue where the JSX key type is not an optional string https://github.com/rescript-lang/syntax/pull/693
 
 #### :eyeglasses: Spec Compliance
 
diff --git a/lib/4.06.1/unstable/js_compiler.ml b/lib/4.06.1/unstable/js_compiler.ml
index 0e6879f617..eab64f524c 100644
--- a/lib/4.06.1/unstable/js_compiler.ml
+++ b/lib/4.06.1/unstable/js_compiler.ml
@@ -273011,6 +273011,8 @@ let constantString ~loc str =
 (* {} empty record *)
 let emptyRecord ~loc = Exp.record ~loc [] None
 
+let unitExpr ~loc = Exp.construct ~loc (Location.mkloc (Lident "()") loc) None
+
 let safeTypeFromValue valueStr =
   let valueStr = getLabel valueStr in
   if valueStr = "" || (valueStr.[0] [@doesNotRaise]) <> '_' then valueStr
@@ -273360,51 +273362,46 @@ let transformUppercaseCall3 ~config modulePath mapper jsxExprLoc callExprLoc
   match config.mode with
   (* The new jsx transform *)
   | "automatic" ->
-    let jsxExpr, key =
+    let jsxExpr, keyAndUnit =
       match (!childrenArg, keyProp) with
-      | None, (_, keyExpr) :: _ ->
+      | None, key :: _ ->
         ( Exp.ident
             {loc = Location.none; txt = Ldot (Lident "React", "jsxKeyed")},
-          [(nolabel, keyExpr)] )
+          [key; (nolabel, unitExpr ~loc:Location.none)] )
       | None, [] ->
         (Exp.ident {loc = Location.none; txt = Ldot (Lident "React", "jsx")}, [])
-      | Some _, (_, keyExpr) :: _ ->
+      | Some _, key :: _ ->
         ( Exp.ident
             {loc = Location.none; txt = Ldot (Lident "React", "jsxsKeyed")},
-          [(nolabel, keyExpr)] )
+          [key; (nolabel, unitExpr ~loc:Location.none)] )
       | Some _, [] ->
         ( Exp.ident {loc = Location.none; txt = Ldot (Lident "React", "jsxs")},
           [] )
     in
-    Exp.apply ~attrs jsxExpr ([(nolabel, makeID); (nolabel, props)] @ key)
+    Exp.apply ~attrs jsxExpr ([(nolabel, makeID); (nolabel, props)] @ keyAndUnit)
   | _ -> (
     match (!childrenArg, keyProp) with
-    | None, (_, keyExpr) :: _ ->
+    | None, key :: _ ->
       Exp.apply ~attrs
         (Exp.ident
            {
              loc = Location.none;
              txt = Ldot (Lident "React", "createElementWithKey");
            })
-        [(nolabel, makeID); (nolabel, props); (nolabel, keyExpr)]
+        [key; (nolabel, makeID); (nolabel, props)]
     | None, [] ->
       Exp.apply ~attrs
         (Exp.ident
            {loc = Location.none; txt = Ldot (Lident "React", "createElement")})
         [(nolabel, makeID); (nolabel, props)]
-    | Some children, (_, keyExpr) :: _ ->
+    | Some children, key :: _ ->
       Exp.apply ~attrs
         (Exp.ident
            {
              loc = Location.none;
              txt = Ldot (Lident "React", "createElementVariadicWithKey");
            })
-        [
-          (nolabel, makeID);
-          (nolabel, props);
-          (nolabel, children);
-          (nolabel, keyExpr);
-        ]
+        [key; (nolabel, makeID); (nolabel, props); (nolabel, children)]
     | Some children, [] ->
       Exp.apply ~attrs
         (Exp.ident
@@ -273470,25 +273467,25 @@ let transformLowercaseCall3 ~config mapper jsxExprLoc callExprLoc attrs
     let keyProp =
       args |> List.filter (fun (arg_label, _) -> "key" = getLabel arg_label)
     in
-    let jsxExpr, key =
+    let jsxExpr, keyAndUnit =
       match (!childrenArg, keyProp) with
-      | None, (_, keyExpr) :: _ ->
+      | None, key :: _ ->
         ( Exp.ident
             {loc = Location.none; txt = Ldot (Lident "ReactDOM", "jsxKeyed")},
-          [(nolabel, keyExpr)] )
+          [key; (nolabel, unitExpr ~loc:Location.none)] )
       | None, [] ->
         ( Exp.ident {loc = Location.none; txt = Ldot (Lident "ReactDOM", "jsx")},
           [] )
-      | Some _, (_, keyExpr) :: _ ->
+      | Some _, key :: _ ->
         ( Exp.ident
             {loc = Location.none; txt = Ldot (Lident "ReactDOM", "jsxsKeyed")},
-          [(nolabel, keyExpr)] )
+          [key; (nolabel, unitExpr ~loc:Location.none)] )
       | Some _, [] ->
         ( Exp.ident {loc = Location.none; txt = Ldot (Lident "ReactDOM", "jsxs")},
           [] )
     in
     Exp.apply ~attrs jsxExpr
-      ([(nolabel, componentNameExpr); (nolabel, props)] @ key)
+      ([(nolabel, componentNameExpr); (nolabel, props)] @ keyAndUnit)
   | _ ->
     let children, nonChildrenProps =
       extractChildren ~loc:jsxExprLoc callArguments
diff --git a/lib/4.06.1/unstable/js_playground_compiler.ml b/lib/4.06.1/unstable/js_playground_compiler.ml
index 314e28560a..559685bd4b 100644
--- a/lib/4.06.1/unstable/js_playground_compiler.ml
+++ b/lib/4.06.1/unstable/js_playground_compiler.ml
@@ -274474,6 +274474,8 @@ let constantString ~loc str =
 (* {} empty record *)
 let emptyRecord ~loc = Exp.record ~loc [] None
 
+let unitExpr ~loc = Exp.construct ~loc (Location.mkloc (Lident "()") loc) None
+
 let safeTypeFromValue valueStr =
   let valueStr = getLabel valueStr in
   if valueStr = "" || (valueStr.[0] [@doesNotRaise]) <> '_' then valueStr
@@ -274823,51 +274825,46 @@ let transformUppercaseCall3 ~config modulePath mapper jsxExprLoc callExprLoc
   match config.mode with
   (* The new jsx transform *)
   | "automatic" ->
-    let jsxExpr, key =
+    let jsxExpr, keyAndUnit =
       match (!childrenArg, keyProp) with
-      | None, (_, keyExpr) :: _ ->
+      | None, key :: _ ->
         ( Exp.ident
             {loc = Location.none; txt = Ldot (Lident "React", "jsxKeyed")},
-          [(nolabel, keyExpr)] )
+          [key; (nolabel, unitExpr ~loc:Location.none)] )
       | None, [] ->
         (Exp.ident {loc = Location.none; txt = Ldot (Lident "React", "jsx")}, [])
-      | Some _, (_, keyExpr) :: _ ->
+      | Some _, key :: _ ->
         ( Exp.ident
             {loc = Location.none; txt = Ldot (Lident "React", "jsxsKeyed")},
-          [(nolabel, keyExpr)] )
+          [key; (nolabel, unitExpr ~loc:Location.none)] )
       | Some _, [] ->
         ( Exp.ident {loc = Location.none; txt = Ldot (Lident "React", "jsxs")},
           [] )
     in
-    Exp.apply ~attrs jsxExpr ([(nolabel, makeID); (nolabel, props)] @ key)
+    Exp.apply ~attrs jsxExpr ([(nolabel, makeID); (nolabel, props)] @ keyAndUnit)
   | _ -> (
     match (!childrenArg, keyProp) with
-    | None, (_, keyExpr) :: _ ->
+    | None, key :: _ ->
       Exp.apply ~attrs
         (Exp.ident
            {
              loc = Location.none;
              txt = Ldot (Lident "React", "createElementWithKey");
            })
-        [(nolabel, makeID); (nolabel, props); (nolabel, keyExpr)]
+        [key; (nolabel, makeID); (nolabel, props)]
     | None, [] ->
       Exp.apply ~attrs
         (Exp.ident
            {loc = Location.none; txt = Ldot (Lident "React", "createElement")})
         [(nolabel, makeID); (nolabel, props)]
-    | Some children, (_, keyExpr) :: _ ->
+    | Some children, key :: _ ->
       Exp.apply ~attrs
         (Exp.ident
            {
              loc = Location.none;
              txt = Ldot (Lident "React", "createElementVariadicWithKey");
            })
-        [
-          (nolabel, makeID);
-          (nolabel, props);
-          (nolabel, children);
-          (nolabel, keyExpr);
-        ]
+        [key; (nolabel, makeID); (nolabel, props); (nolabel, children)]
     | Some children, [] ->
       Exp.apply ~attrs
         (Exp.ident
@@ -274933,25 +274930,25 @@ let transformLowercaseCall3 ~config mapper jsxExprLoc callExprLoc attrs
     let keyProp =
       args |> List.filter (fun (arg_label, _) -> "key" = getLabel arg_label)
     in
-    let jsxExpr, key =
+    let jsxExpr, keyAndUnit =
       match (!childrenArg, keyProp) with
-      | None, (_, keyExpr) :: _ ->
+      | None, key :: _ ->
         ( Exp.ident
             {loc = Location.none; txt = Ldot (Lident "ReactDOM", "jsxKeyed")},
-          [(nolabel, keyExpr)] )
+          [key; (nolabel, unitExpr ~loc:Location.none)] )
       | None, [] ->
         ( Exp.ident {loc = Location.none; txt = Ldot (Lident "ReactDOM", "jsx")},
           [] )
-      | Some _, (_, keyExpr) :: _ ->
+      | Some _, key :: _ ->
         ( Exp.ident
             {loc = Location.none; txt = Ldot (Lident "ReactDOM", "jsxsKeyed")},
-          [(nolabel, keyExpr)] )
+          [key; (nolabel, unitExpr ~loc:Location.none)] )
       | Some _, [] ->
         ( Exp.ident {loc = Location.none; txt = Ldot (Lident "ReactDOM", "jsxs")},
           [] )
     in
     Exp.apply ~attrs jsxExpr
-      ([(nolabel, componentNameExpr); (nolabel, props)] @ key)
+      ([(nolabel, componentNameExpr); (nolabel, props)] @ keyAndUnit)
   | _ ->
     let children, nonChildrenProps =
       extractChildren ~loc:jsxExprLoc callArguments
diff --git a/lib/4.06.1/whole_compiler.ml b/lib/4.06.1/whole_compiler.ml
index 396eb85143..3bf85a12a6 100644
--- a/lib/4.06.1/whole_compiler.ml
+++ b/lib/4.06.1/whole_compiler.ml
@@ -284858,6 +284858,8 @@ let constantString ~loc str =
 (* {} empty record *)
 let emptyRecord ~loc = Exp.record ~loc [] None
 
+let unitExpr ~loc = Exp.construct ~loc (Location.mkloc (Lident "()") loc) None
+
 let safeTypeFromValue valueStr =
   let valueStr = getLabel valueStr in
   if valueStr = "" || (valueStr.[0] [@doesNotRaise]) <> '_' then valueStr
@@ -285207,51 +285209,46 @@ let transformUppercaseCall3 ~config modulePath mapper jsxExprLoc callExprLoc
   match config.mode with
   (* The new jsx transform *)
   | "automatic" ->
-    let jsxExpr, key =
+    let jsxExpr, keyAndUnit =
       match (!childrenArg, keyProp) with
-      | None, (_, keyExpr) :: _ ->
+      | None, key :: _ ->
         ( Exp.ident
             {loc = Location.none; txt = Ldot (Lident "React", "jsxKeyed")},
-          [(nolabel, keyExpr)] )
+          [key; (nolabel, unitExpr ~loc:Location.none)] )
       | None, [] ->
         (Exp.ident {loc = Location.none; txt = Ldot (Lident "React", "jsx")}, [])
-      | Some _, (_, keyExpr) :: _ ->
+      | Some _, key :: _ ->
         ( Exp.ident
             {loc = Location.none; txt = Ldot (Lident "React", "jsxsKeyed")},
-          [(nolabel, keyExpr)] )
+          [key; (nolabel, unitExpr ~loc:Location.none)] )
       | Some _, [] ->
         ( Exp.ident {loc = Location.none; txt = Ldot (Lident "React", "jsxs")},
           [] )
     in
-    Exp.apply ~attrs jsxExpr ([(nolabel, makeID); (nolabel, props)] @ key)
+    Exp.apply ~attrs jsxExpr ([(nolabel, makeID); (nolabel, props)] @ keyAndUnit)
   | _ -> (
     match (!childrenArg, keyProp) with
-    | None, (_, keyExpr) :: _ ->
+    | None, key :: _ ->
       Exp.apply ~attrs
         (Exp.ident
            {
              loc = Location.none;
              txt = Ldot (Lident "React", "createElementWithKey");
            })
-        [(nolabel, makeID); (nolabel, props); (nolabel, keyExpr)]
+        [key; (nolabel, makeID); (nolabel, props)]
     | None, [] ->
       Exp.apply ~attrs
         (Exp.ident
            {loc = Location.none; txt = Ldot (Lident "React", "createElement")})
         [(nolabel, makeID); (nolabel, props)]
-    | Some children, (_, keyExpr) :: _ ->
+    | Some children, key :: _ ->
       Exp.apply ~attrs
         (Exp.ident
            {
              loc = Location.none;
              txt = Ldot (Lident "React", "createElementVariadicWithKey");
            })
-        [
-          (nolabel, makeID);
-          (nolabel, props);
-          (nolabel, children);
-          (nolabel, keyExpr);
-        ]
+        [key; (nolabel, makeID); (nolabel, props); (nolabel, children)]
     | Some children, [] ->
       Exp.apply ~attrs
         (Exp.ident
@@ -285317,25 +285314,25 @@ let transformLowercaseCall3 ~config mapper jsxExprLoc callExprLoc attrs
     let keyProp =
       args |> List.filter (fun (arg_label, _) -> "key" = getLabel arg_label)
     in
-    let jsxExpr, key =
+    let jsxExpr, keyAndUnit =
       match (!childrenArg, keyProp) with
-      | None, (_, keyExpr) :: _ ->
+      | None, key :: _ ->
         ( Exp.ident
             {loc = Location.none; txt = Ldot (Lident "ReactDOM", "jsxKeyed")},
-          [(nolabel, keyExpr)] )
+          [key; (nolabel, unitExpr ~loc:Location.none)] )
       | None, [] ->
         ( Exp.ident {loc = Location.none; txt = Ldot (Lident "ReactDOM", "jsx")},
           [] )
-      | Some _, (_, keyExpr) :: _ ->
+      | Some _, key :: _ ->
         ( Exp.ident
             {loc = Location.none; txt = Ldot (Lident "ReactDOM", "jsxsKeyed")},
-          [(nolabel, keyExpr)] )
+          [key; (nolabel, unitExpr ~loc:Location.none)] )
       | Some _, [] ->
         ( Exp.ident {loc = Location.none; txt = Ldot (Lident "ReactDOM", "jsxs")},
           [] )
     in
     Exp.apply ~attrs jsxExpr
-      ([(nolabel, componentNameExpr); (nolabel, props)] @ key)
+      ([(nolabel, componentNameExpr); (nolabel, props)] @ keyAndUnit)
   | _ ->
     let children, nonChildrenProps =
       extractChildren ~loc:jsxExprLoc callArguments
diff --git a/syntax b/syntax
index d64839e3de..e3aaffd5fc 160000
--- a/syntax
+++ b/syntax
@@ -1 +1 @@
-Subproject commit d64839e3deae9ecb9a5507b18981292dc6e3ec9f
+Subproject commit e3aaffd5fcf30abf0a7e9b5a856881950b845b70