diff --git a/package-lock.json b/package-lock.json
index 7d6445b46f..9cfbbc1382 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "@channel.io/design-system",
-  "version": "0.2.10",
+  "version": "0.2.11",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -6217,6 +6217,12 @@
       "integrity": "sha512-FvUupuM3rlRsRtCN+fDudtmytGO6iHJuuRKS1Ss0pG5z8oX0diNEw94UEL7hgDbpN94rgaK5R7sWm6RrSkZuAQ==",
       "dev": true
     },
+    "@types/uuid": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-8.3.0.tgz",
+      "integrity": "sha512-eQ9qFW/fhfGJF8WKHGEHZEyVWfZxrT+6CLIJGBcZPfxUh/+BnEj+UCGYMlr9qZuX/2AltsvwrGqp0LhEW8D0zQ==",
+      "dev": true
+    },
     "@types/webpack": {
       "version": "4.41.21",
       "resolved": "https://registry.npmjs.org/@types/webpack/-/webpack-4.41.21.tgz",
@@ -6675,6 +6681,14 @@
             "log-symbols": "^2.1.0",
             "loglevelnext": "^1.0.1",
             "uuid": "^3.1.0"
+          },
+          "dependencies": {
+            "uuid": {
+              "version": "3.4.0",
+              "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
+              "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
+              "dev": true
+            }
           }
         }
       }
@@ -20610,6 +20624,12 @@
             "psl": "^1.1.28",
             "punycode": "^2.1.1"
           }
+        },
+        "uuid": {
+          "version": "3.4.0",
+          "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
+          "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
+          "dev": true
         }
       }
     },
@@ -23253,10 +23273,9 @@
       "dev": true
     },
     "uuid": {
-      "version": "3.4.0",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
-      "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
-      "dev": true
+      "version": "8.3.1",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.1.tgz",
+      "integrity": "sha512-FOmRr+FmWEIG8uhZv6C2bTgEVXsHk08kE7mPlrBbEe+c3r9pjceVPgupIfNIhc4yx55H69OXANrUaSuu9eInKg=="
     },
     "v8-compile-cache": {
       "version": "2.1.1",
@@ -23676,6 +23695,14 @@
       "requires": {
         "ansi-colors": "^3.0.0",
         "uuid": "^3.3.2"
+      },
+      "dependencies": {
+        "uuid": {
+          "version": "3.4.0",
+          "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
+          "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
+          "dev": true
+        }
       }
     },
     "webpack-sources": {
diff --git a/package.json b/package.json
index 7723709872..fb3a054280 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@channel.io/design-system",
-  "version": "0.2.10",
+  "version": "0.2.11",
   "description": "Design System by Channel",
   "repository": {
     "type": "git",
@@ -86,6 +86,7 @@
     "@types/lodash-es": "^4.17.3",
     "@types/react": "^16.9.34",
     "@types/styled-components": "^5.1.0",
+    "@types/uuid": "^8.3.0",
     "@typescript-eslint/eslint-plugin": "^2.34.0",
     "@typescript-eslint/parser": "^2.34.0",
     "babel-eslint": "^8.2.6",
@@ -125,6 +126,7 @@
     "styled-components": ">=5"
   },
   "dependencies": {
-    "lodash-es": "^4.17.15"
+    "lodash-es": "^4.17.15",
+    "uuid": "^8.3.1"
   }
 }
diff --git a/src/components/TabActions/TabActions.tsx b/src/components/TabActions/TabActions.tsx
index 2e7e77be58..3fa8ef03b4 100644
--- a/src/components/TabActions/TabActions.tsx
+++ b/src/components/TabActions/TabActions.tsx
@@ -1,5 +1,6 @@
 /* External dependencies */
 import React, { Ref, forwardRef, useMemo } from 'react'
+import { v4 as uuid } from 'uuid'
 import _ from 'lodash'
 
 /* Internal dependencies */
@@ -21,18 +22,25 @@ function TabActionsComponent({
   children,
   ...otherProps
 }: TabActionsProps, forwardedRef: Ref<any>) {
-  const Content = useMemo(() => (
-    _.map(children, (child) => {
-      if (React.isValidElement(child)) {
-        // @ts-ignore
-        return React.cloneElement(child, { disabled })
-      }
-      if (_.isFunction(child)) {
-        return child({ disabled })
-      }
-      return undefined
-    })
-  ), [disabled, children])
+  const Content = useMemo(() => {
+    if (_.isArray(children)) {
+      return _.map(children, (child) => {
+        if (React.isValidElement(child)) {
+          return React.cloneElement(child, { key: child.key || uuid(), disabled })
+        }
+        if (_.isFunction(child)) {
+          const functionChild = child as Function
+          return React.cloneElement(functionChild({}), { key: uuid(), disabled })
+        }
+        return undefined
+      }).filter(_.identity)
+    }
+    if (_.isFunction(children)) {
+      const functionChild = children as Function
+      return functionChild({ disabled })
+    }
+    return children
+  }, [disabled, children])
 
   return (
     <Wrapper
diff --git a/src/components/Tabs/Tabs.stories.tsx b/src/components/Tabs/Tabs.stories.tsx
index e5b48db695..7e47c44561 100644
--- a/src/components/Tabs/Tabs.stories.tsx
+++ b/src/components/Tabs/Tabs.stories.tsx
@@ -1,6 +1,7 @@
 /* External dependencies */
 import React from 'react'
 import base from 'paths.macro'
+import { v4 as uuid } from 'uuid'
 import _ from 'lodash'
 
 /* Internal dependencies */
@@ -49,7 +50,10 @@ Primary.args = {
 export const WithActions = ({ ...otherProps }) => (
   <Tabs {...otherProps}>
     { _.range(0, 8).map((n) => (
-      <TabItem optionKey={`tab-item-${n}`}>
+      <TabItem
+        key={uuid()}
+        optionKey={`tab-item-${n}`}
+      >
         Tab { n }
       </TabItem>
     )) }
diff --git a/src/components/Tabs/Tabs.tsx b/src/components/Tabs/Tabs.tsx
index 005982e820..623f5e590c 100644
--- a/src/components/Tabs/Tabs.tsx
+++ b/src/components/Tabs/Tabs.tsx
@@ -1,5 +1,6 @@
 /* External dependencies */
 import React, { Ref, forwardRef, useState, useEffect, useMemo, useCallback } from 'react'
+import { v4 as uuid } from 'uuid'
 import _ from 'lodash'
 
 /* Internal dependencies */
@@ -68,12 +69,12 @@ function Tabs({
   ])
 
   const Actions = useMemo(() => (
-    React.Children.map(children, (element) => {
-      if (isTabActions(element)) {
-        return React.cloneElement(element, { disabled })
+    _.map(children, (child) => {
+      if (isTabActions(child)) {
+        return React.cloneElement(child, { key: child.key || uuid(), disabled })
       }
       return null
-    })
+    }).filter(_.identity)
   ), [disabled, children])
 
   return (