diff --git a/test/functional/apps/context/_size.js b/test/functional/apps/context/_size.js
index 5f3d1ebe409744..ea9b2c8cf18192 100644
--- a/test/functional/apps/context/_size.js
+++ b/test/functional/apps/context/_size.js
@@ -30,7 +30,8 @@ export default function({ getService, getPageObjects }) {
   const docTable = getService('docTable');
   const PageObjects = getPageObjects(['context']);
 
-  describe('context size', function contextSize() {
+  // FLAKY: https://github.com/elastic/kibana/issues/53888
+  describe.skip('context size', function contextSize() {
     before(async function() {
       await kibanaServer.uiSettings.update({
         'context:defaultSize': `${TEST_DEFAULT_CONTEXT_SIZE}`,
diff --git a/x-pack/legacy/plugins/siem/public/components/drag_and_drop/draggable_wrapper.test.tsx b/x-pack/legacy/plugins/siem/public/components/drag_and_drop/draggable_wrapper.test.tsx
index d34f4cce9fea41..92adc1a9adb7a2 100644
--- a/x-pack/legacy/plugins/siem/public/components/drag_and_drop/draggable_wrapper.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/drag_and_drop/draggable_wrapper.test.tsx
@@ -12,7 +12,7 @@ import { mockBrowserFields, mocksSource } from '../../containers/source/mock';
 import { TestProviders } from '../../mock';
 import { mockDataProviders } from '../timeline/data_providers/mock/mock_data_providers';
 import { DragDropContextWrapper } from './drag_drop_context_wrapper';
-import { DraggableWrapper, ConditionalPortal } from './draggable_wrapper';
+import { DraggableWrapper } from './draggable_wrapper';
 import { useMountAppended } from '../../utils/use_mount_appended';
 
 describe('DraggableWrapper', () => {
@@ -84,32 +84,3 @@ describe('DraggableWrapper', () => {
     });
   });
 });
-
-describe('ConditionalPortal', () => {
-  const mount = useMountAppended();
-  const props = {
-    usePortal: false,
-    registerProvider: jest.fn(),
-    isDragging: true,
-  };
-
-  it(`doesn't call registerProvider is NOT isDragging`, () => {
-    mount(
-      <ConditionalPortal {...props} isDragging={false}>
-        <div />
-      </ConditionalPortal>
-    );
-
-    expect(props.registerProvider.mock.calls.length).toEqual(0);
-  });
-
-  it('calls registerProvider when isDragging', () => {
-    mount(
-      <ConditionalPortal {...props}>
-        <div />
-      </ConditionalPortal>
-    );
-
-    expect(props.registerProvider.mock.calls.length).toEqual(1);
-  });
-});
diff --git a/x-pack/legacy/plugins/siem/public/components/drag_and_drop/draggable_wrapper.tsx b/x-pack/legacy/plugins/siem/public/components/drag_and_drop/draggable_wrapper.tsx
index 4b80b9fff2740e..7d84403b87f8d0 100644
--- a/x-pack/legacy/plugins/siem/public/components/drag_and_drop/draggable_wrapper.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/drag_and_drop/draggable_wrapper.tsx
@@ -4,14 +4,14 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { createContext, useCallback, useContext, useEffect, useState } from 'react';
+import React, { createContext, useContext, useEffect } from 'react';
 import {
   Draggable,
   DraggableProvided,
   DraggableStateSnapshot,
   Droppable,
 } from 'react-beautiful-dnd';
-import { useDispatch } from 'react-redux';
+import { connect, ConnectedProps } from 'react-redux';
 import styled from 'styled-components';
 import deepEqual from 'fast-deep-equal';
 
@@ -47,50 +47,34 @@ const ProviderContentWrapper = styled.span`
   }
 `;
 
-type RenderFunctionProp = (
-  props: DataProvider,
-  provided: DraggableProvided,
-  state: DraggableStateSnapshot
-) => React.ReactNode;
-
 interface OwnProps {
   dataProvider: DataProvider;
   inline?: boolean;
-  render: RenderFunctionProp;
+  render: (
+    props: DataProvider,
+    provided: DraggableProvided,
+    state: DraggableStateSnapshot
+  ) => React.ReactNode;
   truncate?: boolean;
 }
 
-type Props = OwnProps;
+type Props = OwnProps & PropsFromRedux;
 
 /**
  * Wraps a draggable component to handle registration / unregistration of the
  * data provider associated with the item being dropped
  */
 
-export const DraggableWrapper = React.memo<Props>(
-  ({ dataProvider, render, truncate }) => {
-    const [providerRegistered, setProviderRegistered] = useState(false);
-    const dispatch = useDispatch();
+const DraggableWrapperComponent = React.memo<Props>(
+  ({ dataProvider, registerProvider, render, truncate, unRegisterProvider }) => {
     const usePortal = useDraggablePortalContext();
 
-    const registerProvider = useCallback(() => {
-      if (!providerRegistered) {
-        dispatch(dragAndDropActions.registerProvider({ provider: dataProvider }));
-        setProviderRegistered(true);
-      }
-    }, [dispatch, providerRegistered, dataProvider]);
-
-    const unRegisterProvider = useCallback(
-      () => dispatch(dragAndDropActions.unRegisterProvider({ id: dataProvider.id })),
-      [dispatch, dataProvider]
-    );
-
-    useEffect(
-      () => () => {
-        unRegisterProvider();
-      },
-      []
-    );
+    useEffect(() => {
+      registerProvider!({ provider: dataProvider });
+      return () => {
+        unRegisterProvider!({ id: dataProvider.id });
+      };
+    }, []);
 
     return (
       <Wrapper data-test-subj="draggableWrapperDiv">
@@ -103,18 +87,13 @@ export const DraggableWrapper = React.memo<Props>(
                 key={getDraggableId(dataProvider.id)}
               >
                 {(provided, snapshot) => (
-                  <ConditionalPortal
-                    isDragging={snapshot.isDragging}
-                    registerProvider={registerProvider}
-                    usePortal={snapshot.isDragging && usePortal}
-                  >
+                  <ConditionalPortal usePortal={snapshot.isDragging && usePortal}>
                     <ProviderContainer
                       {...provided.draggableProps}
                       {...provided.dragHandleProps}
                       ref={provided.innerRef}
                       data-test-subj="providerContainer"
                       isDragging={snapshot.isDragging}
-                      registerProvider={registerProvider}
                       style={{
                         ...provided.draggableProps.style,
                       }}
@@ -141,12 +120,28 @@ export const DraggableWrapper = React.memo<Props>(
       </Wrapper>
     );
   },
-  (prevProps, nextProps) =>
-    deepEqual(prevProps.dataProvider, nextProps.dataProvider) &&
-    prevProps.render !== nextProps.render &&
-    prevProps.truncate === nextProps.truncate
+  (prevProps, nextProps) => {
+    return (
+      deepEqual(prevProps.dataProvider, nextProps.dataProvider) &&
+      prevProps.render !== nextProps.render &&
+      prevProps.truncate === nextProps.truncate
+    );
+  }
 );
 
+DraggableWrapperComponent.displayName = 'DraggableWrapperComponent';
+
+const mapDispatchToProps = {
+  registerProvider: dragAndDropActions.registerProvider,
+  unRegisterProvider: dragAndDropActions.unRegisterProvider,
+};
+
+const connector = connect(null, mapDispatchToProps);
+
+type PropsFromRedux = ConnectedProps<typeof connector>;
+
+export const DraggableWrapper = connector(DraggableWrapperComponent);
+
 DraggableWrapper.displayName = 'DraggableWrapper';
 
 /**
@@ -155,24 +150,8 @@ DraggableWrapper.displayName = 'DraggableWrapper';
  *
  * See: https://github.com/atlassian/react-beautiful-dnd/issues/499
  */
-
-interface ConditionalPortalProps {
-  children: React.ReactNode;
-  usePortal: boolean;
-  isDragging: boolean;
-  registerProvider: () => void;
-}
-
-export const ConditionalPortal = React.memo<ConditionalPortalProps>(
-  ({ children, usePortal, registerProvider, isDragging }) => {
-    useEffect(() => {
-      if (isDragging) {
-        registerProvider();
-      }
-    }, [isDragging, registerProvider]);
-
-    return usePortal ? <EuiPortal>{children}</EuiPortal> : <>{children}</>;
-  }
+const ConditionalPortal = React.memo<{ children: React.ReactNode; usePortal: boolean }>(
+  ({ children, usePortal }) => (usePortal ? <EuiPortal>{children}</EuiPortal> : <>{children}</>)
 );
 
 ConditionalPortal.displayName = 'ConditionalPortal';