diff --git a/tests/baselines/reference/excessiveStackDepthFlatArray.errors.txt b/tests/baselines/reference/excessiveStackDepthFlatArray.errors.txt
new file mode 100644
index 00000000000..825a402ca02
--- /dev/null
+++ b/tests/baselines/reference/excessiveStackDepthFlatArray.errors.txt
@@ -0,0 +1,48 @@
+tests/cases/compiler/index.tsx(35,13): error TS2322: Type '{ key: string; }' is not assignable to type 'HTMLAttributes<HTMLLIElement>'.
+  Property 'key' does not exist on type 'HTMLAttributes<HTMLLIElement>'.
+
+
+==== tests/cases/compiler/index.tsx (1 errors) ====
+    interface MiddlewareArray<T> extends Array<T> {}
+    declare function configureStore(options: { middleware: MiddlewareArray<any> }): void;
+    
+    declare const defaultMiddleware: MiddlewareArray<any>;
+    configureStore({
+      middleware: [...defaultMiddleware], // Should not error
+    });
+    
+    declare namespace React {
+      type DetailedHTMLProps<E extends HTMLAttributes<T>, T> = E;
+      interface HTMLAttributes<T> {
+        children?: ReactNode;
+      }
+      type ReactNode = ReactChild | ReactFragment | boolean | null | undefined;
+      type ReactText = string | number;
+      type ReactChild = ReactText;
+      type ReactFragment = {} | ReactNodeArray;
+      interface ReactNodeArray extends Array<ReactNode> {}
+    }
+    declare namespace JSX {
+      interface IntrinsicElements {
+        ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>;
+        li: React.DetailedHTMLProps<React.HTMLAttributes<HTMLLIElement>, HTMLLIElement>;
+      }
+    }
+    declare var React: any;
+    
+    const Component = () => {
+      const categories = ['Fruit', 'Vegetables'];
+    
+      return (
+        <ul>
+          <li>All</li>
+          {categories.map((category) => (
+            <li key={category}>{category}</li> // Error about 'key' only
+                ~~~
+!!! error TS2322: Type '{ key: string; }' is not assignable to type 'HTMLAttributes<HTMLLIElement>'.
+!!! error TS2322:   Property 'key' does not exist on type 'HTMLAttributes<HTMLLIElement>'.
+          ))}
+        </ul>
+      );
+    };
+    
\ No newline at end of file
diff --git a/tests/baselines/reference/excessiveStackDepthFlatArray.js b/tests/baselines/reference/excessiveStackDepthFlatArray.js
index a8e70171466..4578612b4a6 100644
--- a/tests/baselines/reference/excessiveStackDepthFlatArray.js
+++ b/tests/baselines/reference/excessiveStackDepthFlatArray.js
@@ -1,4 +1,4 @@
-//// [excessiveStackDepthFlatArray.ts]
+//// [index.tsx]
 interface MiddlewareArray<T> extends Array<T> {}
 declare function configureStore(options: { middleware: MiddlewareArray<any> }): void;
 
@@ -6,9 +6,41 @@ declare const defaultMiddleware: MiddlewareArray<any>;
 configureStore({
   middleware: [...defaultMiddleware], // Should not error
 });
+
+declare namespace React {
+  type DetailedHTMLProps<E extends HTMLAttributes<T>, T> = E;
+  interface HTMLAttributes<T> {
+    children?: ReactNode;
+  }
+  type ReactNode = ReactChild | ReactFragment | boolean | null | undefined;
+  type ReactText = string | number;
+  type ReactChild = ReactText;
+  type ReactFragment = {} | ReactNodeArray;
+  interface ReactNodeArray extends Array<ReactNode> {}
+}
+declare namespace JSX {
+  interface IntrinsicElements {
+    ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>;
+    li: React.DetailedHTMLProps<React.HTMLAttributes<HTMLLIElement>, HTMLLIElement>;
+  }
+}
+declare var React: any;
+
+const Component = () => {
+  const categories = ['Fruit', 'Vegetables'];
+
+  return (
+    <ul>
+      <li>All</li>
+      {categories.map((category) => (
+        <li key={category}>{category}</li> // Error about 'key' only
+      ))}
+    </ul>
+  );
+};
 
 
-//// [excessiveStackDepthFlatArray.js]
+//// [index.js]
 var __spreadArray = (this && this.__spreadArray) || function (to, from) {
     for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
         to[j] = from[i];
@@ -17,3 +49,10 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from) {
 configureStore({
     middleware: __spreadArray([], defaultMiddleware)
 });
+var Component = function () {
+    var categories = ['Fruit', 'Vegetables'];
+    return (React.createElement("ul", null,
+        React.createElement("li", null, "All"),
+        categories.map(function (category) { return (React.createElement("li", { key: category }, category) // Error about 'key' only
+        ); })));
+};
diff --git a/tests/baselines/reference/excessiveStackDepthFlatArray.symbols b/tests/baselines/reference/excessiveStackDepthFlatArray.symbols
index 9d05616763f..08fe546e6da 100644
--- a/tests/baselines/reference/excessiveStackDepthFlatArray.symbols
+++ b/tests/baselines/reference/excessiveStackDepthFlatArray.symbols
@@ -1,26 +1,128 @@
-=== tests/cases/compiler/excessiveStackDepthFlatArray.ts ===
+=== tests/cases/compiler/index.tsx ===
 interface MiddlewareArray<T> extends Array<T> {}
->MiddlewareArray : Symbol(MiddlewareArray, Decl(excessiveStackDepthFlatArray.ts, 0, 0))
->T : Symbol(T, Decl(excessiveStackDepthFlatArray.ts, 0, 26))
+>MiddlewareArray : Symbol(MiddlewareArray, Decl(index.tsx, 0, 0))
+>T : Symbol(T, Decl(index.tsx, 0, 26))
 >Array : Symbol(Array, Decl(lib.es5.d.ts, --, --), Decl(lib.es5.d.ts, --, --), Decl(lib.es2015.core.d.ts, --, --), Decl(lib.es2015.iterable.d.ts, --, --), Decl(lib.es2015.symbol.wellknown.d.ts, --, --) ... and 2 more)
->T : Symbol(T, Decl(excessiveStackDepthFlatArray.ts, 0, 26))
+>T : Symbol(T, Decl(index.tsx, 0, 26))
 
 declare function configureStore(options: { middleware: MiddlewareArray<any> }): void;
->configureStore : Symbol(configureStore, Decl(excessiveStackDepthFlatArray.ts, 0, 48))
->options : Symbol(options, Decl(excessiveStackDepthFlatArray.ts, 1, 32))
->middleware : Symbol(middleware, Decl(excessiveStackDepthFlatArray.ts, 1, 42))
->MiddlewareArray : Symbol(MiddlewareArray, Decl(excessiveStackDepthFlatArray.ts, 0, 0))
+>configureStore : Symbol(configureStore, Decl(index.tsx, 0, 48))
+>options : Symbol(options, Decl(index.tsx, 1, 32))
+>middleware : Symbol(middleware, Decl(index.tsx, 1, 42))
+>MiddlewareArray : Symbol(MiddlewareArray, Decl(index.tsx, 0, 0))
 
 declare const defaultMiddleware: MiddlewareArray<any>;
->defaultMiddleware : Symbol(defaultMiddleware, Decl(excessiveStackDepthFlatArray.ts, 3, 13))
->MiddlewareArray : Symbol(MiddlewareArray, Decl(excessiveStackDepthFlatArray.ts, 0, 0))
+>defaultMiddleware : Symbol(defaultMiddleware, Decl(index.tsx, 3, 13))
+>MiddlewareArray : Symbol(MiddlewareArray, Decl(index.tsx, 0, 0))
 
 configureStore({
->configureStore : Symbol(configureStore, Decl(excessiveStackDepthFlatArray.ts, 0, 48))
+>configureStore : Symbol(configureStore, Decl(index.tsx, 0, 48))
 
   middleware: [...defaultMiddleware], // Should not error
->middleware : Symbol(middleware, Decl(excessiveStackDepthFlatArray.ts, 4, 16))
->defaultMiddleware : Symbol(defaultMiddleware, Decl(excessiveStackDepthFlatArray.ts, 3, 13))
+>middleware : Symbol(middleware, Decl(index.tsx, 4, 16))
+>defaultMiddleware : Symbol(defaultMiddleware, Decl(index.tsx, 3, 13))
 
 });
 
+declare namespace React {
+>React : Symbol(React, Decl(index.tsx, 6, 3), Decl(index.tsx, 25, 11))
+
+  type DetailedHTMLProps<E extends HTMLAttributes<T>, T> = E;
+>DetailedHTMLProps : Symbol(DetailedHTMLProps, Decl(index.tsx, 8, 25))
+>E : Symbol(E, Decl(index.tsx, 9, 25))
+>HTMLAttributes : Symbol(HTMLAttributes, Decl(index.tsx, 9, 61))
+>T : Symbol(T, Decl(index.tsx, 9, 53))
+>T : Symbol(T, Decl(index.tsx, 9, 53))
+>E : Symbol(E, Decl(index.tsx, 9, 25))
+
+  interface HTMLAttributes<T> {
+>HTMLAttributes : Symbol(HTMLAttributes, Decl(index.tsx, 9, 61))
+>T : Symbol(T, Decl(index.tsx, 10, 27))
+
+    children?: ReactNode;
+>children : Symbol(HTMLAttributes.children, Decl(index.tsx, 10, 31))
+>ReactNode : Symbol(ReactNode, Decl(index.tsx, 12, 3))
+  }
+  type ReactNode = ReactChild | ReactFragment | boolean | null | undefined;
+>ReactNode : Symbol(ReactNode, Decl(index.tsx, 12, 3))
+>ReactChild : Symbol(ReactChild, Decl(index.tsx, 14, 35))
+>ReactFragment : Symbol(ReactFragment, Decl(index.tsx, 15, 30))
+
+  type ReactText = string | number;
+>ReactText : Symbol(ReactText, Decl(index.tsx, 13, 75))
+
+  type ReactChild = ReactText;
+>ReactChild : Symbol(ReactChild, Decl(index.tsx, 14, 35))
+>ReactText : Symbol(ReactText, Decl(index.tsx, 13, 75))
+
+  type ReactFragment = {} | ReactNodeArray;
+>ReactFragment : Symbol(ReactFragment, Decl(index.tsx, 15, 30))
+>ReactNodeArray : Symbol(ReactNodeArray, Decl(index.tsx, 16, 43))
+
+  interface ReactNodeArray extends Array<ReactNode> {}
+>ReactNodeArray : Symbol(ReactNodeArray, Decl(index.tsx, 16, 43))
+>Array : Symbol(Array, Decl(lib.es5.d.ts, --, --), Decl(lib.es5.d.ts, --, --), Decl(lib.es2015.core.d.ts, --, --), Decl(lib.es2015.iterable.d.ts, --, --), Decl(lib.es2015.symbol.wellknown.d.ts, --, --) ... and 2 more)
+>ReactNode : Symbol(ReactNode, Decl(index.tsx, 12, 3))
+}
+declare namespace JSX {
+>JSX : Symbol(JSX, Decl(index.tsx, 18, 1))
+
+  interface IntrinsicElements {
+>IntrinsicElements : Symbol(IntrinsicElements, Decl(index.tsx, 19, 23))
+
+    ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>;
+>ul : Symbol(IntrinsicElements.ul, Decl(index.tsx, 20, 31))
+>React : Symbol(React, Decl(index.tsx, 6, 3), Decl(index.tsx, 25, 11))
+>DetailedHTMLProps : Symbol(React.DetailedHTMLProps, Decl(index.tsx, 8, 25))
+>React : Symbol(React, Decl(index.tsx, 6, 3), Decl(index.tsx, 25, 11))
+>HTMLAttributes : Symbol(React.HTMLAttributes, Decl(index.tsx, 9, 61))
+>HTMLUListElement : Symbol(HTMLUListElement, Decl(lib.dom.d.ts, --, --), Decl(lib.dom.d.ts, --, --))
+>HTMLUListElement : Symbol(HTMLUListElement, Decl(lib.dom.d.ts, --, --), Decl(lib.dom.d.ts, --, --))
+
+    li: React.DetailedHTMLProps<React.HTMLAttributes<HTMLLIElement>, HTMLLIElement>;
+>li : Symbol(IntrinsicElements.li, Decl(index.tsx, 21, 90))
+>React : Symbol(React, Decl(index.tsx, 6, 3), Decl(index.tsx, 25, 11))
+>DetailedHTMLProps : Symbol(React.DetailedHTMLProps, Decl(index.tsx, 8, 25))
+>React : Symbol(React, Decl(index.tsx, 6, 3), Decl(index.tsx, 25, 11))
+>HTMLAttributes : Symbol(React.HTMLAttributes, Decl(index.tsx, 9, 61))
+>HTMLLIElement : Symbol(HTMLLIElement, Decl(lib.dom.d.ts, --, --), Decl(lib.dom.d.ts, --, --))
+>HTMLLIElement : Symbol(HTMLLIElement, Decl(lib.dom.d.ts, --, --), Decl(lib.dom.d.ts, --, --))
+  }
+}
+declare var React: any;
+>React : Symbol(React, Decl(index.tsx, 6, 3), Decl(index.tsx, 25, 11))
+
+const Component = () => {
+>Component : Symbol(Component, Decl(index.tsx, 27, 5))
+
+  const categories = ['Fruit', 'Vegetables'];
+>categories : Symbol(categories, Decl(index.tsx, 28, 7))
+
+  return (
+    <ul>
+>ul : Symbol(JSX.IntrinsicElements.ul, Decl(index.tsx, 20, 31))
+
+      <li>All</li>
+>li : Symbol(JSX.IntrinsicElements.li, Decl(index.tsx, 21, 90))
+>li : Symbol(JSX.IntrinsicElements.li, Decl(index.tsx, 21, 90))
+
+      {categories.map((category) => (
+>categories.map : Symbol(Array.map, Decl(lib.es5.d.ts, --, --))
+>categories : Symbol(categories, Decl(index.tsx, 28, 7))
+>map : Symbol(Array.map, Decl(lib.es5.d.ts, --, --))
+>category : Symbol(category, Decl(index.tsx, 33, 23))
+
+        <li key={category}>{category}</li> // Error about 'key' only
+>li : Symbol(JSX.IntrinsicElements.li, Decl(index.tsx, 21, 90))
+>key : Symbol(key, Decl(index.tsx, 34, 11))
+>category : Symbol(category, Decl(index.tsx, 33, 23))
+>category : Symbol(category, Decl(index.tsx, 33, 23))
+>li : Symbol(JSX.IntrinsicElements.li, Decl(index.tsx, 21, 90))
+
+      ))}
+    </ul>
+>ul : Symbol(JSX.IntrinsicElements.ul, Decl(index.tsx, 20, 31))
+
+  );
+};
+
diff --git a/tests/baselines/reference/excessiveStackDepthFlatArray.types b/tests/baselines/reference/excessiveStackDepthFlatArray.types
index ad02a8e74b6..ae346a034fa 100644
--- a/tests/baselines/reference/excessiveStackDepthFlatArray.types
+++ b/tests/baselines/reference/excessiveStackDepthFlatArray.types
@@ -1,4 +1,4 @@
-=== tests/cases/compiler/excessiveStackDepthFlatArray.ts ===
+=== tests/cases/compiler/index.tsx ===
 interface MiddlewareArray<T> extends Array<T> {}
 declare function configureStore(options: { middleware: MiddlewareArray<any> }): void;
 >configureStore : (options: {    middleware: MiddlewareArray<any>;}) => void
@@ -21,3 +21,88 @@ configureStore({
 
 });
 
+declare namespace React {
+  type DetailedHTMLProps<E extends HTMLAttributes<T>, T> = E;
+>DetailedHTMLProps : E
+
+  interface HTMLAttributes<T> {
+    children?: ReactNode;
+>children : ReactNode
+  }
+  type ReactNode = ReactChild | ReactFragment | boolean | null | undefined;
+>ReactNode : ReactNode
+>null : null
+
+  type ReactText = string | number;
+>ReactText : ReactText
+
+  type ReactChild = ReactText;
+>ReactChild : ReactText
+
+  type ReactFragment = {} | ReactNodeArray;
+>ReactFragment : ReactFragment
+
+  interface ReactNodeArray extends Array<ReactNode> {}
+}
+declare namespace JSX {
+  interface IntrinsicElements {
+    ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>;
+>ul : React.HTMLAttributes<HTMLUListElement>
+>React : any
+>React : any
+
+    li: React.DetailedHTMLProps<React.HTMLAttributes<HTMLLIElement>, HTMLLIElement>;
+>li : React.HTMLAttributes<HTMLLIElement>
+>React : any
+>React : any
+  }
+}
+declare var React: any;
+>React : any
+
+const Component = () => {
+>Component : () => any
+>() => {  const categories = ['Fruit', 'Vegetables'];  return (    <ul>      <li>All</li>      {categories.map((category) => (        <li key={category}>{category}</li> // Error about 'key' only      ))}    </ul>  );} : () => any
+
+  const categories = ['Fruit', 'Vegetables'];
+>categories : string[]
+>['Fruit', 'Vegetables'] : string[]
+>'Fruit' : "Fruit"
+>'Vegetables' : "Vegetables"
+
+  return (
+>(    <ul>      <li>All</li>      {categories.map((category) => (        <li key={category}>{category}</li> // Error about 'key' only      ))}    </ul>  ) : any
+
+    <ul>
+><ul>      <li>All</li>      {categories.map((category) => (        <li key={category}>{category}</li> // Error about 'key' only      ))}    </ul> : any
+>ul : any
+
+      <li>All</li>
+><li>All</li> : any
+>li : any
+>li : any
+
+      {categories.map((category) => (
+>categories.map((category) => (        <li key={category}>{category}</li> // Error about 'key' only      )) : any[]
+>categories.map : <U>(callbackfn: (value: string, index: number, array: string[]) => U, thisArg?: any) => U[]
+>categories : string[]
+>map : <U>(callbackfn: (value: string, index: number, array: string[]) => U, thisArg?: any) => U[]
+>(category) => (        <li key={category}>{category}</li> // Error about 'key' only      ) : (category: string) => any
+>category : string
+>(        <li key={category}>{category}</li> // Error about 'key' only      ) : any
+
+        <li key={category}>{category}</li> // Error about 'key' only
+><li key={category}>{category}</li> : any
+>li : any
+>key : string
+>category : string
+>category : string
+>li : any
+
+      ))}
+    </ul>
+>ul : any
+
+  );
+};
+
diff --git a/tests/cases/compiler/excessiveStackDepthFlatArray.ts b/tests/cases/compiler/excessiveStackDepthFlatArray.ts
index fd16b622199..b8ad99e287d 100644
--- a/tests/cases/compiler/excessiveStackDepthFlatArray.ts
+++ b/tests/cases/compiler/excessiveStackDepthFlatArray.ts
@@ -1,5 +1,7 @@
-// @lib: es2019
+// @lib: es2019,dom
+// @jsx: react
 
+// @Filename: index.tsx
 interface MiddlewareArray<T> extends Array<T> {}
 declare function configureStore(options: { middleware: MiddlewareArray<any> }): void;
 
@@ -7,3 +9,35 @@ declare const defaultMiddleware: MiddlewareArray<any>;
 configureStore({
   middleware: [...defaultMiddleware], // Should not error
 });
+
+declare namespace React {
+  type DetailedHTMLProps<E extends HTMLAttributes<T>, T> = E;
+  interface HTMLAttributes<T> {
+    children?: ReactNode;
+  }
+  type ReactNode = ReactChild | ReactFragment | boolean | null | undefined;
+  type ReactText = string | number;
+  type ReactChild = ReactText;
+  type ReactFragment = {} | ReactNodeArray;
+  interface ReactNodeArray extends Array<ReactNode> {}
+}
+declare namespace JSX {
+  interface IntrinsicElements {
+    ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>;
+    li: React.DetailedHTMLProps<React.HTMLAttributes<HTMLLIElement>, HTMLLIElement>;
+  }
+}
+declare var React: any;
+
+const Component = () => {
+  const categories = ['Fruit', 'Vegetables'];
+
+  return (
+    <ul>
+      <li>All</li>
+      {categories.map((category) => (
+        <li key={category}>{category}</li> // Error about 'key' only
+      ))}
+    </ul>
+  );
+};