diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/action_form.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/action_form.tsx
index e45e3fbf1a109..e9f79633ef520 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/action_form.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/action_form.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { Fragment, useState, useEffect, useCallback } from 'react';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 import {
@@ -362,42 +362,44 @@ export const ActionForm = ({
             ?.validateParams(actionItem.params);
 
           return (
-            <ActionTypeForm
-              actionItem={actionItem}
-              actionConnector={actionConnector}
-              actionParamsErrors={actionParamsErrors}
-              index={index}
-              key={`action-form-action-at-${index}`}
-              setActionParamsProperty={setActionParamsProperty}
-              actionTypesIndex={actionTypesIndex}
-              connectors={connectors}
-              defaultActionGroupId={defaultActionGroupId}
-              messageVariables={messageVariables}
-              actionGroups={actionGroups}
-              defaultActionMessage={defaultActionMessage}
-              defaultParams={getDefaultActionParams?.(actionItem.actionTypeId, actionItem.group)}
-              isActionGroupDisabledForActionType={isActionGroupDisabledForActionType}
-              setActionGroupIdByIndex={setActionGroupIdByIndex}
-              onAddConnector={() => {
-                setActiveActionItem({ actionTypeId: actionItem.actionTypeId, indices: [index] });
-                setAddModalVisibility(true);
-              }}
-              onConnectorSelected={(id: string) => {
-                setActionIdByIndex(id, index);
-              }}
-              actionTypeRegistry={actionTypeRegistry}
-              onDeleteAction={() => {
-                const updatedActions = actions.filter(
-                  (_item: AlertAction, i: number) => i !== index
-                );
-                setActions(updatedActions);
-                setIsAddActionPanelOpen(
-                  updatedActions.filter((item: AlertAction) => item.id !== actionItem.id).length ===
-                    0
-                );
-                setActiveActionItem(undefined);
-              }}
-            />
+            <Fragment key={`action-form-action-at-${index}`}>
+              <ActionTypeForm
+                actionItem={actionItem}
+                actionConnector={actionConnector}
+                actionParamsErrors={actionParamsErrors}
+                index={index}
+                setActionParamsProperty={setActionParamsProperty}
+                actionTypesIndex={actionTypesIndex}
+                connectors={connectors}
+                defaultActionGroupId={defaultActionGroupId}
+                messageVariables={messageVariables}
+                actionGroups={actionGroups}
+                defaultActionMessage={defaultActionMessage}
+                defaultParams={getDefaultActionParams?.(actionItem.actionTypeId, actionItem.group)}
+                isActionGroupDisabledForActionType={isActionGroupDisabledForActionType}
+                setActionGroupIdByIndex={setActionGroupIdByIndex}
+                onAddConnector={() => {
+                  setActiveActionItem({ actionTypeId: actionItem.actionTypeId, indices: [index] });
+                  setAddModalVisibility(true);
+                }}
+                onConnectorSelected={(id: string) => {
+                  setActionIdByIndex(id, index);
+                }}
+                actionTypeRegistry={actionTypeRegistry}
+                onDeleteAction={() => {
+                  const updatedActions = actions.filter(
+                    (_item: AlertAction, i: number) => i !== index
+                  );
+                  setActions(updatedActions);
+                  setIsAddActionPanelOpen(
+                    updatedActions.filter((item: AlertAction) => item.id !== actionItem.id)
+                      .length === 0
+                  );
+                  setActiveActionItem(undefined);
+                }}
+              />
+              <EuiSpacer size="m" />
+            </Fragment>
           );
         })}
       <EuiSpacer size="m" />
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/action_type_form.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/action_type_form.tsx
index ac9d989db03f6..2690aeaffad32 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/action_type_form.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/action_type_form.tsx
@@ -311,83 +311,80 @@ export const ActionTypeForm = ({
   );
 
   return (
-    <>
-      <EuiAccordion
-        initialIsOpen={true}
-        key={index}
-        id={index.toString()}
-        onToggle={setIsOpen}
-        paddingSize="l"
-        className="actAccordionActionForm"
-        buttonContentClassName="actAccordionActionForm__button"
-        data-test-subj={`alertActionAccordion-${index}`}
-        buttonContent={
-          <EuiFlexGroup gutterSize="l" alignItems="center">
-            <EuiFlexItem grow={false}>
-              <EuiIcon type={actionTypeRegistered.iconClass} size="m" />
-            </EuiFlexItem>
-            <EuiFlexItem>
-              <EuiText>
-                <div>
-                  <EuiFlexGroup gutterSize="s">
+    <EuiAccordion
+      initialIsOpen={true}
+      key={index}
+      id={index.toString()}
+      onToggle={setIsOpen}
+      paddingSize="l"
+      className="actAccordionActionForm"
+      buttonContentClassName="actAccordionActionForm__button"
+      data-test-subj={`alertActionAccordion-${index}`}
+      buttonContent={
+        <EuiFlexGroup gutterSize="l" alignItems="center">
+          <EuiFlexItem grow={false}>
+            <EuiIcon type={actionTypeRegistered.iconClass} size="m" />
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <EuiText>
+              <div>
+                <EuiFlexGroup gutterSize="s">
+                  <EuiFlexItem grow={false}>
+                    <FormattedMessage
+                      defaultMessage="{actionConnectorName}"
+                      id="xpack.triggersActionsUI.sections.actionTypeForm.existingAlertActionTypeEditTitle"
+                      values={{
+                        actionConnectorName: `${actionConnector.name} ${
+                          actionConnector.isPreconfigured ? preconfiguredMessage : ''
+                        }`,
+                      }}
+                    />
+                  </EuiFlexItem>
+                  {selectedActionGroup && !isOpen && (
                     <EuiFlexItem grow={false}>
-                      <FormattedMessage
-                        defaultMessage="{actionConnectorName}"
-                        id="xpack.triggersActionsUI.sections.actionTypeForm.existingAlertActionTypeEditTitle"
-                        values={{
-                          actionConnectorName: `${actionConnector.name} ${
-                            actionConnector.isPreconfigured ? preconfiguredMessage : ''
-                          }`,
-                        }}
-                      />
+                      <EuiBadge>{selectedActionGroup.name}</EuiBadge>
                     </EuiFlexItem>
-                    {selectedActionGroup && !isOpen && (
-                      <EuiFlexItem grow={false}>
-                        <EuiBadge>{selectedActionGroup.name}</EuiBadge>
-                      </EuiFlexItem>
+                  )}
+                  <EuiFlexItem grow={false}>
+                    {checkEnabledResult.isEnabled === false && (
+                      <>
+                        <EuiIconTip
+                          type="alert"
+                          color="danger"
+                          content={i18n.translate(
+                            'xpack.triggersActionsUI.sections.actionTypeForm.actionDisabledTitle',
+                            {
+                              defaultMessage: 'This action is disabled',
+                            }
+                          )}
+                          position="right"
+                        />
+                      </>
                     )}
-                    <EuiFlexItem grow={false}>
-                      {checkEnabledResult.isEnabled === false && (
-                        <>
-                          <EuiIconTip
-                            type="alert"
-                            color="danger"
-                            content={i18n.translate(
-                              'xpack.triggersActionsUI.sections.actionTypeForm.actionDisabledTitle',
-                              {
-                                defaultMessage: 'This action is disabled',
-                              }
-                            )}
-                            position="right"
-                          />
-                        </>
-                      )}
-                    </EuiFlexItem>
-                  </EuiFlexGroup>
-                </div>
-              </EuiText>
-            </EuiFlexItem>
-          </EuiFlexGroup>
-        }
-        extraAction={
-          <EuiButtonIcon
-            iconType="minusInCircle"
-            color="danger"
-            className="actAccordionActionForm__extraAction"
-            aria-label={i18n.translate(
-              'xpack.triggersActionsUI.sections.actionTypeForm.accordion.deleteIconAriaLabel',
-              {
-                defaultMessage: 'Delete',
-              }
-            )}
-            onClick={onDeleteAction}
-          />
-        }
-      >
-        {accordionContent}
-      </EuiAccordion>
-      <EuiSpacer size="m" />
-    </>
+                  </EuiFlexItem>
+                </EuiFlexGroup>
+              </div>
+            </EuiText>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      }
+      extraAction={
+        <EuiButtonIcon
+          iconType="minusInCircle"
+          color="danger"
+          className="actAccordionActionForm__extraAction"
+          aria-label={i18n.translate(
+            'xpack.triggersActionsUI.sections.actionTypeForm.accordion.deleteIconAriaLabel',
+            {
+              defaultMessage: 'Delete',
+            }
+          )}
+          onClick={onDeleteAction}
+        />
+      }
+    >
+      {accordionContent}
+    </EuiAccordion>
   );
 };
 
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/type_filter.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/type_filter.tsx
index 0aa38486952ca..cadfbece849b8 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/type_filter.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/type_filter.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { useEffect, useState } from 'react';
+import React, { Fragment, useEffect, useState } from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
 import {
   EuiFilterGroup,
@@ -63,12 +63,8 @@ export const TypeFilter: React.FunctionComponent<TypeFilterProps> = ({
       >
         <div className="euiFilterSelect__items">
           {options.map((groupItem, groupIndex) => (
-            <>
-              <EuiTitle
-                data-test-subj={`alertType${groupIndex}Group`}
-                size="xxs"
-                key={`group${groupIndex}`}
-              >
+            <Fragment key={`group${groupIndex}`}>
+              <EuiTitle data-test-subj={`alertType${groupIndex}Group`} size="xxs">
                 <h3>{groupItem.groupName}</h3>
               </EuiTitle>
               {groupItem.subOptions.map((item, index) => (
@@ -88,7 +84,7 @@ export const TypeFilter: React.FunctionComponent<TypeFilterProps> = ({
                   {item.name}
                 </EuiFilterSelectItem>
               ))}
-            </>
+            </Fragment>
           ))}
         </div>
       </EuiPopover>
diff --git a/x-pack/plugins/triggers_actions_ui/public/common/expression_items/threshold.tsx b/x-pack/plugins/triggers_actions_ui/public/common/expression_items/threshold.tsx
index e70fc8dcef449..5c44b6f29178b 100644
--- a/x-pack/plugins/triggers_actions_ui/public/common/expression_items/threshold.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/common/expression_items/threshold.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { useEffect, useState } from 'react';
+import React, { Fragment, useEffect, useState } from 'react';
 import { i18n } from '@kbn/i18n';
 import {
   EuiExpression,
@@ -134,7 +134,7 @@ export const ThresholdExpression = ({
           </EuiFlexItem>
           {Array.from(Array(numRequiredThresholds)).map((_notUsed, i) => {
             return (
-              <>
+              <Fragment key={`threshold${i}`}>
                 {i > 0 ? (
                   <EuiFlexItem
                     grow={false}
@@ -143,7 +143,7 @@ export const ThresholdExpression = ({
                     <EuiText>{andThresholdText}</EuiText>
                   </EuiFlexItem>
                 ) : null}
-                <EuiFlexItem grow={false} key={`threshold${i}`}>
+                <EuiFlexItem grow={false}>
                   <EuiFormRow
                     isInvalid={errors[`threshold${i}`]?.length > 0 || !threshold[i]}
                     error={errors[`threshold${i}`]}
@@ -167,7 +167,7 @@ export const ThresholdExpression = ({
                     />
                   </EuiFormRow>
                 </EuiFlexItem>
-              </>
+              </Fragment>
             );
           })}
         </EuiFlexGroup>