diff --git a/packages/ui-components/src/components/UIComboBox/UIComboBox.tsx b/packages/ui-components/src/components/UIComboBox/UIComboBox.tsx
index dbff7a75f2..a3d990850d 100644
--- a/packages/ui-components/src/components/UIComboBox/UIComboBox.tsx
+++ b/packages/ui-components/src/components/UIComboBox/UIComboBox.tsx
@@ -116,7 +116,7 @@ export class UIComboBox extends React.Component<UIComboBoxProps, UIComboBoxState
     private query = '';
     private ignoreOpenKeys: Array<string> = ['Meta', 'Control', 'Shift', 'Tab', 'Alt', 'CapsLock'];
     private isListHidden = false;
-    public readonly calloutCollisionTransform = new CalloutCollisionTransform(this.comboboxDomRef, this.menuDomRef);
+    private calloutCollisionTransform = new CalloutCollisionTransform(this.comboboxDomRef, this.menuDomRef);
 
     /**
      * Initializes component properties.
@@ -764,7 +764,7 @@ export class UIComboBox extends React.Component<UIComboBoxProps, UIComboBoxState
                         },
 
                         ...this.props.calloutProps,
-                        ...getCalloutCollisionTransformationPropsForDropdown(this)
+                        ...getCalloutCollisionTransformationPropsForDropdown(this, this.calloutCollisionTransform)
                     }}
                     {...(this.props.highlight && {
                         onInput: this.onInput,
diff --git a/packages/ui-components/src/components/UIDropdown/UIDropdown.tsx b/packages/ui-components/src/components/UIDropdown/UIDropdown.tsx
index d5e2e94804..854d83584b 100644
--- a/packages/ui-components/src/components/UIDropdown/UIDropdown.tsx
+++ b/packages/ui-components/src/components/UIDropdown/UIDropdown.tsx
@@ -63,7 +63,7 @@ const ERROR_BORDER_COLOR = 'var(--vscode-inputValidation-errorBorder)';
 export class UIDropdown extends React.Component<UIDropdownProps, UIDropdownState> {
     private dropdownDomRef = React.createRef<HTMLDivElement>();
     private menuDomRef = React.createRef<HTMLDivElement>();
-    public readonly calloutCollisionTransform = new CalloutCollisionTransform(this.dropdownDomRef, this.menuDomRef);
+    private calloutCollisionTransform = new CalloutCollisionTransform(this.dropdownDomRef, this.menuDomRef);
 
     /**
      * Initializes component properties.
@@ -330,7 +330,7 @@ export class UIDropdown extends React.Component<UIDropdownProps, UIDropdownState
                         ref: this.menuDomRef
                     },
                     ...this.props.calloutProps,
-                    ...getCalloutCollisionTransformationPropsForDropdown(this)
+                    ...getCalloutCollisionTransformationPropsForDropdown(this, this.calloutCollisionTransform)
                 }}
                 onRenderOption={this.onRenderOption.bind(this)}
                 onRenderItem={this.onRenderItem.bind(this)}
diff --git a/packages/ui-components/src/components/UIDropdown/utils.ts b/packages/ui-components/src/components/UIDropdown/utils.ts
index a56c8689d9..db37750090 100644
--- a/packages/ui-components/src/components/UIDropdown/utils.ts
+++ b/packages/ui-components/src/components/UIDropdown/utils.ts
@@ -51,13 +51,17 @@ export function getCalloutCollisionTransformationProps(
  * Method returns callback function to 'onLayerDidMount' property of dropdown 'callout'.
  *
  * @param dropdown Instance of dropdown.
+ * @param calloutCollisionTransform of callout collision transformation.
  * @returns Returns callback function to 'onLayerDidMount' property of dropdown 'callout'.
  */
-function getOnLayerDidMount(dropdown: UIDropdown | UIComboBox): () => void {
+function getOnLayerDidMount(
+    dropdown: UIDropdown | UIComboBox,
+    calloutCollisionTransform: CalloutCollisionTransform
+): () => void {
     return () => {
         const { layerProps } =
             getCalloutCollisionTransformationProps(
-                dropdown.calloutCollisionTransform,
+                calloutCollisionTransform,
                 dropdown.props.multiSelect,
                 dropdown.props.calloutCollisionTransformation
             ) ?? {};
@@ -74,13 +78,17 @@ function getOnLayerDidMount(dropdown: UIDropdown | UIComboBox): () => void {
  * Method returns callback function to 'onLayerWillUnmount' property of dropdown 'callout'.
  *
  * @param dropdown Instance of dropdown.
+ * @param calloutCollisionTransform of callout collision transformation.
  * @returns Returns callback function to 'onLayerWillUnmount' property of dropdown 'callout'.
  */
-function getOnLayerWillUnmount(dropdown: UIDropdown | UIComboBox): () => void {
+function getOnLayerWillUnmount(
+    dropdown: UIDropdown | UIComboBox,
+    calloutCollisionTransform: CalloutCollisionTransform
+): () => void {
     return () => {
         const { layerProps } =
             getCalloutCollisionTransformationProps(
-                dropdown.calloutCollisionTransform,
+                calloutCollisionTransform,
                 dropdown.props.multiSelect,
                 dropdown.props.calloutCollisionTransformation
             ) ?? {};
@@ -97,10 +105,12 @@ function getOnLayerWillUnmount(dropdown: UIDropdown | UIComboBox): () => void {
  * Method returns callback function to 'preventDismissOnEvent' property of dropdown 'callout', which prevents callout dismiss/close if focus/click on target elements.
  *
  * @param dropdown Instance of dropdown.
+ * @param calloutCollisionTransform of callout collision transformation.
  * @returns Returns callback function to 'preventDismissOnEvent' property of dropdown 'callout'.
  */
 function getPreventDismissOnEvent(
-    dropdown: UIDropdown | UIComboBox
+    dropdown: UIDropdown | UIComboBox,
+    calloutCollisionTransform: CalloutCollisionTransform
 ): (
     event: Event | React.FocusEvent<Element> | React.KeyboardEvent<Element> | React.MouseEvent<Element, MouseEvent>
 ) => boolean {
@@ -112,7 +122,7 @@ function getPreventDismissOnEvent(
         if (!preventDismiss) {
             const { preventDismissOnEvent } =
                 getCalloutCollisionTransformationProps(
-                    dropdown.calloutCollisionTransform,
+                    calloutCollisionTransform,
                     dropdown.props.multiSelect,
                     dropdown.props.calloutCollisionTransformation
                 ) ?? {};
@@ -130,17 +140,19 @@ function getPreventDismissOnEvent(
  *  and if overlap happens, then additional offset is applied to make action buttons visible.
  *
  * @param dropdown Instance of dropdown.
+ * @param calloutCollisionTransform of callout collision transformation.
  * @returns Callout props to enable callout collision transformation.
  */
 export function getCalloutCollisionTransformationPropsForDropdown(
-    dropdown: UIDropdown | UIComboBox
+    dropdown: UIDropdown | UIComboBox,
+    calloutCollisionTransform: CalloutCollisionTransform
 ): ICalloutProps | undefined {
     if (dropdown.props.multiSelect && dropdown.props.calloutCollisionTransformation) {
         return {
-            preventDismissOnEvent: getPreventDismissOnEvent(dropdown),
+            preventDismissOnEvent: getPreventDismissOnEvent(dropdown, calloutCollisionTransform),
             layerProps: {
-                onLayerDidMount: getOnLayerDidMount(dropdown),
-                onLayerWillUnmount: getOnLayerWillUnmount(dropdown)
+                onLayerDidMount: getOnLayerDidMount(dropdown, calloutCollisionTransform),
+                onLayerWillUnmount: getOnLayerWillUnmount(dropdown, calloutCollisionTransform)
             }
         };
     }