diff --git a/public/pages/CreatePolicy/components/DefinePolicy/DefinePolicy.tsx b/public/pages/CreatePolicy/components/DefinePolicy/DefinePolicy.tsx
index 9593c1998..d891e7591 100644
--- a/public/pages/CreatePolicy/components/DefinePolicy/DefinePolicy.tsx
+++ b/public/pages/CreatePolicy/components/DefinePolicy/DefinePolicy.tsx
@@ -60,7 +60,7 @@ const DefinePolicy = ({ jsonString, onChange, onAutoIndent, hasJSONError }: Defi
     </div>
     <EuiSpacer size="m" />
     <DarkModeConsumer>
-      {isDarkMode => (
+      {(isDarkMode) => (
         <EuiCodeEditor
           mode="json"
           theme={isDarkMode ? "sense-dark" : "github"}
diff --git a/public/pages/CreatePolicy/containers/CreatePolicy/CreatePolicy.tsx b/public/pages/CreatePolicy/containers/CreatePolicy/CreatePolicy.tsx
index 78ebf9ab8..1329d02f3 100644
--- a/public/pages/CreatePolicy/containers/CreatePolicy/CreatePolicy.tsx
+++ b/public/pages/CreatePolicy/containers/CreatePolicy/CreatePolicy.tsx
@@ -34,6 +34,7 @@ interface CreatePolicyState {
 
 export default class CreatePolicy extends Component<CreatePolicyProps, CreatePolicyState> {
   static contextType = CoreServicesContext;
+  _isMount: boolean;
   constructor(props: CreatePolicyProps) {
     super(props);
 
@@ -47,6 +48,8 @@ export default class CreatePolicy extends Component<CreatePolicyProps, CreatePol
       isSubmitting: false,
       hasSubmitted: false,
     };
+
+    this._isMount = true;
   }
 
   componentDidMount = async (): Promise<void> => {
@@ -71,6 +74,10 @@ export default class CreatePolicy extends Component<CreatePolicyProps, CreatePol
     }
   };
 
+  componentWillUnmount() {
+    this._isMount = false;
+  }
+
   getPolicyToEdit = async (policyId: string): Promise<void> => {
     try {
       const { policyService } = this.props;
@@ -169,6 +176,9 @@ export default class CreatePolicy extends Component<CreatePolicyProps, CreatePol
       console.error(err);
     }
 
+    if (!this._isMount) {
+      return;
+    }
     this.setState({ isSubmitting: false });
   };
 
diff --git a/public/pages/CreateRollup/components/AdvancedAggregation/AdvancedAggregation.tsx b/public/pages/CreateRollup/components/AdvancedAggregation/AdvancedAggregation.tsx
index d7228d151..4f58ab600 100644
--- a/public/pages/CreateRollup/components/AdvancedAggregation/AdvancedAggregation.tsx
+++ b/public/pages/CreateRollup/components/AdvancedAggregation/AdvancedAggregation.tsx
@@ -272,7 +272,7 @@ export default class AdvancedAggregation extends Component<AdvancedAggregationPr
         align: "left",
         render: (aggregationMethod, item) => (
           <EuiForm>
-            <EuiFormRow compressed={true}>
+            <EuiFormRow>
               <EuiSelect
                 compressed={true}
                 value={aggregationMethod}
diff --git a/public/pages/CreateRollup/components/MetricsCalculation/MetricsCalculation.tsx b/public/pages/CreateRollup/components/MetricsCalculation/MetricsCalculation.tsx
index 83a472eca..5981d5758 100644
--- a/public/pages/CreateRollup/components/MetricsCalculation/MetricsCalculation.tsx
+++ b/public/pages/CreateRollup/components/MetricsCalculation/MetricsCalculation.tsx
@@ -260,8 +260,9 @@ export default class MetricsCalculation extends Component<MetricsCalculationProp
         truncateText: true,
         render: (all: boolean, item: MetricItem) => (
           <EuiForm>
-            <EuiFormRow compressed={true}>
+            <EuiFormRow>
               <EuiCheckbox
+                compressed
                 id={`all-${item.source_field.label}`}
                 checked={all}
                 onChange={(e) => this.setChecked(e, "all", item)}
@@ -277,8 +278,9 @@ export default class MetricsCalculation extends Component<MetricsCalculationProp
         align: "center",
         render: (min: boolean, item: MetricItem) => (
           <EuiForm>
-            <EuiFormRow compressed={true}>
+            <EuiFormRow>
               <EuiCheckbox
+                compressed
                 id={`min-${item.source_field.label}`}
                 checked={min}
                 onChange={(e) => this.setChecked(e, "min", item)}
@@ -294,8 +296,9 @@ export default class MetricsCalculation extends Component<MetricsCalculationProp
         align: "center",
         render: (max: boolean, item: MetricItem) => (
           <EuiForm>
-            <EuiFormRow compressed={true}>
+            <EuiFormRow>
               <EuiCheckbox
+                compressed
                 id={`max-${item.source_field.label}`}
                 checked={max}
                 onChange={(e) => this.setChecked(e, "max", item)}
@@ -311,8 +314,9 @@ export default class MetricsCalculation extends Component<MetricsCalculationProp
         align: "center",
         render: (sum: boolean, item: MetricItem) => (
           <EuiForm>
-            <EuiFormRow compressed={true}>
+            <EuiFormRow>
               <EuiCheckbox
+                compressed
                 id={`sum-${item.source_field.label}`}
                 checked={sum}
                 onChange={(e) => this.setChecked(e, "sum", item)}
@@ -328,8 +332,9 @@ export default class MetricsCalculation extends Component<MetricsCalculationProp
         align: "center",
         render: (avg: boolean, item: MetricItem) => (
           <EuiForm>
-            <EuiFormRow compressed={true}>
+            <EuiFormRow>
               <EuiCheckbox
+                compressed
                 id={`avg-${item.source_field.label}`}
                 checked={avg}
                 onChange={(e) => this.setChecked(e, "avg", item)}
@@ -345,8 +350,9 @@ export default class MetricsCalculation extends Component<MetricsCalculationProp
         align: "center",
         render: (value_count: boolean, item: MetricItem) => (
           <EuiForm>
-            <EuiFormRow compressed={true}>
+            <EuiFormRow>
               <EuiCheckbox
+                compressed
                 id={`value_count-${item.source_field.label}`}
                 checked={value_count}
                 onChange={(e) => this.setChecked(e, "value_count", item)}
diff --git a/public/pages/CreateRollup/components/RollupIndices/RollupIndices.tsx b/public/pages/CreateRollup/components/RollupIndices/RollupIndices.tsx
index 1140b66a6..9dedf48af 100644
--- a/public/pages/CreateRollup/components/RollupIndices/RollupIndices.tsx
+++ b/public/pages/CreateRollup/components/RollupIndices/RollupIndices.tsx
@@ -4,9 +4,10 @@
  */
 
 import React, { Component, Fragment } from "react";
-import { EuiSpacer, EuiFormRow, EuiComboBox, EuiCallOut, EuiText, EuiLink } from "@elastic/eui";
+import { EuiSpacer, EuiFormRow, EuiCallOut, EuiText, EuiLink } from "@elastic/eui";
 import { EuiComboBoxOptionOption } from "@elastic/eui/src/components/combo_box/types";
 import _ from "lodash";
+import EuiComboBox from "../../../../components/BetterComboBox";
 import { ContentPanel } from "../../../../components/ContentPanel";
 import { IndexItem } from "../../../../../models/interfaces";
 import IndexService from "../../../../services/IndexService";
@@ -34,6 +35,7 @@ export const ROLLUP_RESULTS_HELP_TEXT_LINK = "https://opensearch.org/docs/latest
 
 export default class RollupIndices extends Component<RollupIndicesProps, RollupIndicesState> {
   static contextType = CoreServicesContext;
+  _isMount: boolean;
   constructor(props: RollupIndicesProps) {
     super(props);
     this.state = {
@@ -42,6 +44,7 @@ export default class RollupIndices extends Component<RollupIndicesProps, RollupI
       targetIndexOptions: [],
     };
 
+    this._isMount = true;
     this.onIndexSearchChange = _.debounce(this.onIndexSearchChange, 500, { leading: true });
   }
 
@@ -49,7 +52,14 @@ export default class RollupIndices extends Component<RollupIndicesProps, RollupI
     await this.onIndexSearchChange("");
   }
 
+  componentWillUnmount(): void {
+    this._isMount = false;
+  }
+
   onIndexSearchChange = async (searchValue: string): Promise<void> => {
+    if (!this._isMount) {
+      return;
+    }
     const { indexService } = this.props;
     this.setState({ isLoading: true, indexOptions: [] });
     try {
@@ -59,7 +69,9 @@ export default class RollupIndices extends Component<RollupIndicesProps, RollupI
         const options = searchValue.trim() ? [{ label: wildcardOption(searchValue) }] : [];
         const dataStreams = dataStreamsAndIndicesNamesResponse.response.dataStreams.map((label) => ({ label }));
         const indices = dataStreamsAndIndicesNamesResponse.response.indices.map((label) => ({ label }));
-        this.setState({ indexOptions: options.concat(dataStreams, indices), targetIndexOptions: indices });
+        if (this._isMount) {
+          this.setState({ indexOptions: options.concat(dataStreams, indices), targetIndexOptions: indices });
+        }
       } else {
         if (dataStreamsAndIndicesNamesResponse.error.startsWith("[index_not_found_exception]")) {
           this.context.notifications.toasts.addDanger("No index available");
@@ -71,7 +83,9 @@ export default class RollupIndices extends Component<RollupIndicesProps, RollupI
       this.context.notifications.toasts.addDanger(err.message);
     }
 
-    this.setState({ isLoading: false });
+    if (this._isMount) {
+      this.setState({ isLoading: false });
+    }
   };
 
   onCreateOption = (searchValue: string, flattenedOptions: { label: string; value?: IndexItem }[]): void => {
diff --git a/public/pages/CreateRollup/components/TimeAggregations/TimeAggregation.tsx b/public/pages/CreateRollup/components/TimeAggregations/TimeAggregation.tsx
index d2be4bf2f..e5cd94eca 100644
--- a/public/pages/CreateRollup/components/TimeAggregations/TimeAggregation.tsx
+++ b/public/pages/CreateRollup/components/TimeAggregations/TimeAggregation.tsx
@@ -7,7 +7,6 @@ import React, { ChangeEvent, Component, Fragment } from "react";
 import {
   EuiSpacer,
   EuiFormRow,
-  EuiComboBox,
   EuiSelect,
   EuiFlexGroup,
   EuiFlexItem,
@@ -21,6 +20,7 @@ import {
   EuiText,
 } from "@elastic/eui";
 import moment from "moment-timezone";
+import EuiComboBox from "../../../../components/BetterComboBox";
 import { RollupService } from "../../../../services";
 import { FieldItem } from "../../../../../models/interfaces";
 import { CalendarTimeunitOptions, FixedTimeunitOptions } from "../../../../utils/constants";
diff --git a/public/pages/CreateRollup/containers/CreateRollupForm/CreateRollupForm.tsx b/public/pages/CreateRollup/containers/CreateRollupForm/CreateRollupForm.tsx
index d3002db0d..85ce8d1b1 100644
--- a/public/pages/CreateRollup/containers/CreateRollupForm/CreateRollupForm.tsx
+++ b/public/pages/CreateRollup/containers/CreateRollupForm/CreateRollupForm.tsx
@@ -77,6 +77,7 @@ interface CreateRollupFormState {
 
 export default class CreateRollupForm extends Component<CreateRollupFormProps, CreateRollupFormState> {
   static contextType = CoreServicesContext;
+  _isMount: boolean;
 
   constructor(props: CreateRollupFormProps) {
     super(props);
@@ -131,12 +132,17 @@ export default class CreateRollupForm extends Component<CreateRollupFormProps, C
     };
     this._next = this._next.bind(this);
     this._prev = this._prev.bind(this);
+    this._isMount = true;
   }
 
   componentDidMount = async (): Promise<void> => {
     this.context.chrome.setBreadcrumbs([BREADCRUMBS.INDEX_MANAGEMENT, BREADCRUMBS.ROLLUPS, BREADCRUMBS.CREATE_ROLLUP]);
   };
 
+  componentWillUnmount() {
+    this._isMount = false;
+  }
+
   getMappings = async (srcIndex: string): Promise<void> => {
     if (!srcIndex.length) return;
     try {
@@ -481,7 +487,9 @@ export default class CreateRollupForm extends Component<CreateRollupFormProps, C
       console.error(err);
     }
 
-    this.setState({ isSubmitting: false });
+    if (this._isMount) {
+      this.setState({ isSubmitting: false });
+    }
   };
 
   onCancel = (): void => {
diff --git a/public/pages/CreateTransform/components/CreateTransformSteps/CreateTransformSteps.tsx b/public/pages/CreateTransform/components/CreateTransformSteps/CreateTransformSteps.tsx
index 838c89215..8f5404825 100644
--- a/public/pages/CreateTransform/components/CreateTransformSteps/CreateTransformSteps.tsx
+++ b/public/pages/CreateTransform/components/CreateTransformSteps/CreateTransformSteps.tsx
@@ -14,21 +14,21 @@ const setOfSteps = (step: number) => {
   return [
     {
       title: "Set up indices",
-      children: null,
+      children: <></>,
     },
     {
       title: "Define transforms",
-      children: null,
+      children: <></>,
       status: step < 2 ? "disabled" : null,
     },
     {
       title: "Specify schedule",
-      children: null,
+      children: <></>,
       status: step < 3 ? "disabled" : null,
     },
     {
       title: "Review and create",
-      children: null,
+      children: <></>,
       status: step < 4 ? "disabled" : null,
     },
   ];
diff --git a/public/pages/CreateTransform/components/TransformIndices/TransformIndices.tsx b/public/pages/CreateTransform/components/TransformIndices/TransformIndices.tsx
index f60457038..0e8b8583c 100644
--- a/public/pages/CreateTransform/components/TransformIndices/TransformIndices.tsx
+++ b/public/pages/CreateTransform/components/TransformIndices/TransformIndices.tsx
@@ -7,7 +7,6 @@ import React, { Component, Fragment } from "react";
 import {
   EuiSpacer,
   EuiFormRow,
-  EuiComboBox,
   EuiCallOut,
   EuiPopover,
   EuiFlexGroup,
@@ -20,6 +19,7 @@ import {
   EuiLink,
 } from "@elastic/eui";
 import _ from "lodash";
+import EuiComboBox from "../../../../components/BetterComboBox";
 import { ContentPanel } from "../../../../components/ContentPanel";
 import IndexFilterPopover from "../IndexFilterPopover";
 import { FieldItem, IndexItem } from "../../../../../models/interfaces";
@@ -53,6 +53,7 @@ interface TransformIndicesState {
 
 export default class TransformIndices extends Component<TransformIndicesProps, TransformIndicesState> {
   static contextType = CoreServicesContext;
+  _isMount: boolean;
   constructor(props: TransformIndicesProps) {
     super(props);
     this.state = {
@@ -63,6 +64,7 @@ export default class TransformIndices extends Component<TransformIndicesProps, T
       selectFieldValue: "",
     };
 
+    this._isMount = true;
     this.onIndexSearchChange = _.debounce(this.onIndexSearchChange, 500, { leading: true });
   }
 
@@ -70,12 +72,22 @@ export default class TransformIndices extends Component<TransformIndicesProps, T
     await this.onIndexSearchChange("");
   }
 
+  componentWillUnmount(): void {
+    this._isMount = false;
+  }
+
   // TODO: created shared method with rollup indices to reduce duplicate code.
   onIndexSearchChange = async (searchValue: string): Promise<void> => {
+    if (!this._isMount) {
+      return;
+    }
     const { indexService } = this.props;
     this.setState({ isLoading: true, indexOptions: [] });
     try {
       const dataStreamsAndIndicesNamesResponse = await indexService.getDataStreamsAndIndicesNames(searchValue);
+      if (!this._isMount) {
+        return;
+      }
       if (dataStreamsAndIndicesNamesResponse.ok) {
         // Adding wildcard to search value
         const options = searchValue.trim() ? [{ label: wildcardOption(searchValue) }] : [];
diff --git a/public/pages/CreateTransform/containers/CreateTransformForm/CreateTransformForm.tsx b/public/pages/CreateTransform/containers/CreateTransformForm/CreateTransformForm.tsx
index 4a5df05c3..326daff6c 100644
--- a/public/pages/CreateTransform/containers/CreateTransformForm/CreateTransformForm.tsx
+++ b/public/pages/CreateTransform/containers/CreateTransformForm/CreateTransformForm.tsx
@@ -80,6 +80,7 @@ interface CreateTransformFormState {
 
 export default class CreateTransformForm extends Component<CreateTransformFormProps, CreateTransformFormState> {
   static contextType = CoreServicesContext;
+  _isMount: boolean;
 
   constructor(props: CreateTransformFormProps) {
     super(props);
@@ -129,12 +130,17 @@ export default class CreateTransformForm extends Component<CreateTransformFormPr
     };
     this._next = this._next.bind(this);
     this._prev = this._prev.bind(this);
+    this._isMount = true;
   }
 
   componentDidMount = async (): Promise<void> => {
     this.context.chrome.setBreadcrumbs([BREADCRUMBS.INDEX_MANAGEMENT, BREADCRUMBS.TRANSFORMS, BREADCRUMBS.CREATE_TRANSFORM]);
   };
 
+  componentWillUnmount() {
+    this._isMount = false;
+  }
+
   getMappings = async (srcIndex: string): Promise<void> => {
     if (!srcIndex.length) return;
     try {
@@ -485,6 +491,9 @@ export default class CreateTransformForm extends Component<CreateTransformFormPr
       console.error(err);
     }
 
+    if (!this._isMount) {
+      return;
+    }
     this.setState({ isSubmitting: false });
   };
 
diff --git a/public/pages/Rollups/containers/Rollups/Rollups.tsx b/public/pages/Rollups/containers/Rollups/Rollups.tsx
index 15212fd86..6780cb813 100644
--- a/public/pages/Rollups/containers/Rollups/Rollups.tsx
+++ b/public/pages/Rollups/containers/Rollups/Rollups.tsx
@@ -269,7 +269,7 @@ export default class Rollups extends Component<RollupsProps, RollupsState> {
       pageIndex: page,
       pageSize: size,
       pageSizeOptions: DEFAULT_PAGE_SIZE_OPTIONS,
-      totalItemCount: totalRollups,
+      totalItemCount: totalRollups || 0,
     };
 
     const sorting: EuiTableSortingType<DocumentRollup> = {
diff --git a/public/pages/VisualCreatePolicy/components/States/State.tsx b/public/pages/VisualCreatePolicy/components/States/State.tsx
index f9d90a582..47e0ce6e4 100644
--- a/public/pages/VisualCreatePolicy/components/States/State.tsx
+++ b/public/pages/VisualCreatePolicy/components/States/State.tsx
@@ -113,8 +113,8 @@ const State = ({ state, isInitialState, idx, onClickEditState, onClickDeleteStat
           <EuiText>No actions. Edit state to add actions.</EuiText>
         ) : (
           <EuiFlexGroup wrap>
-            {state.actions.map((action) => (
-              <EuiFlexItem grow={false} key={makeId()}>
+            {state.actions.map((action, index) => (
+              <EuiFlexItem grow={false} key={`${makeId()}-${index}`}>
                 <EuiPanel>{actionRepoSingleton.getUIActionFromData(action).content()}</EuiPanel>
               </EuiFlexItem>
             ))}
@@ -131,8 +131,8 @@ const State = ({ state, isInitialState, idx, onClickEditState, onClickDeleteStat
           <EuiText>No transitions. Edit state to add transitions.</EuiText>
         ) : (
           <EuiFlexGroup wrap>
-            {state.transitions.map((transition) => (
-              <EuiFlexItem grow={false} key={makeId()}>
+            {state.transitions.map((transition, index) => (
+              <EuiFlexItem grow={false} key={`${makeId()}-${index}`}>
                 <EuiPanel>
                   <TransitionContent transition={transition} />
                 </EuiPanel>
diff --git a/public/pages/VisualCreatePolicy/components/States/States.tsx b/public/pages/VisualCreatePolicy/components/States/States.tsx
index 9090699af..5be62f12c 100644
--- a/public/pages/VisualCreatePolicy/components/States/States.tsx
+++ b/public/pages/VisualCreatePolicy/components/States/States.tsx
@@ -55,7 +55,7 @@ const States = ({ onOpenFlyout, policy, onClickEditState, onClickDeleteState, on
       <div style={{ padding: "0px 10px" }}>
         {!isReadOnly && (
           <>
-            <EuiFormRow compressed style={{ maxWidth: "300px", padding: "15px" }} isInvalid={false} error={null}>
+            <EuiFormRow style={{ maxWidth: "300px", padding: "15px" }} isInvalid={false} error={null}>
               <EuiSelect
                 compressed
                 prepend="Initial state"
diff --git a/public/pages/VisualCreatePolicy/containers/ErrorNotification/ErrorNotification.test.tsx b/public/pages/VisualCreatePolicy/containers/ErrorNotification/ErrorNotification.test.tsx
index 271951ed5..73e1a0637 100644
--- a/public/pages/VisualCreatePolicy/containers/ErrorNotification/ErrorNotification.test.tsx
+++ b/public/pages/VisualCreatePolicy/containers/ErrorNotification/ErrorNotification.test.tsx
@@ -6,11 +6,20 @@
 import React from "react";
 import "@testing-library/jest-dom/extend-expect";
 import { render } from "@testing-library/react";
-import ErrorNotification from "./ErrorNotification";
+import ErrorNotification, { ErrorNotificationProps } from "./ErrorNotification";
 import { ServicesConsumer, ServicesContext } from "../../../../services";
-import { browserServicesMock } from "../../../../../test/mocks";
+import { browserServicesMock, coreServicesMock } from "../../../../../test/mocks";
 import { BrowserServices } from "../../../../models/interfaces";
 import { ErrorNotification as IErrorNotification } from "../../../../../models/interfaces";
+import { CoreServicesContext } from "../../../../components/core_services";
+
+function ErrorNotificationWrapper(props: ErrorNotificationProps) {
+  return (
+    <CoreServicesContext.Provider value={coreServicesMock}>
+      <ErrorNotification {...props} />
+    </CoreServicesContext.Provider>
+  );
+}
 
 function renderErrorNotification(errorNotification: IErrorNotification) {
   return {
@@ -19,7 +28,7 @@ function renderErrorNotification(errorNotification: IErrorNotification) {
         <ServicesConsumer>
           {(services: BrowserServices | null) =>
             services && (
-              <ErrorNotification
+              <ErrorNotificationWrapper
                 errorNotification={errorNotification}
                 errorNotificationJsonString={""}
                 onChangeChannelId={() => {}}
@@ -39,7 +48,7 @@ function renderErrorNotification(errorNotification: IErrorNotification) {
 describe("<ErrorNotification /> spec", () => {
   it("renders the component", () => {
     const { container } = render(
-      <ErrorNotification
+      <ErrorNotificationWrapper
         errorNotification={{ channel: { id: "some_id" }, message_template: { source: "some source message" } }}
         errorNotificationJsonString={""}
         onChangeChannelId={() => {}}
diff --git a/public/pages/VisualCreatePolicy/containers/ErrorNotification/ErrorNotification.tsx b/public/pages/VisualCreatePolicy/containers/ErrorNotification/ErrorNotification.tsx
index 634b837b8..8ae46f301 100644
--- a/public/pages/VisualCreatePolicy/containers/ErrorNotification/ErrorNotification.tsx
+++ b/public/pages/VisualCreatePolicy/containers/ErrorNotification/ErrorNotification.tsx
@@ -17,7 +17,7 @@ import ChannelNotification from "../../components/ChannelNotification";
 import LegacyNotification from "../../components/LegacyNotification";
 import { ERROR_NOTIFICATION_DOCUMENTATION_URL } from "../../../../utils/constants";
 
-interface ErrorNotificationProps {
+export interface ErrorNotificationProps {
   errorNotification: IErrorNotification | undefined;
   errorNotificationJsonString: string;
   onChangeChannelId: (value: ChangeEvent<HTMLSelectElement>) => void;