diff --git a/webapp/channels/src/components/custom_status/date_time_input.tsx b/webapp/channels/src/components/custom_status/date_time_input.tsx
index c322eaa6ce..9eaec36882 100644
--- a/webapp/channels/src/components/custom_status/date_time_input.tsx
+++ b/webapp/channels/src/components/custom_status/date_time_input.tsx
@@ -26,7 +26,6 @@ import Constants, {A11yCustomEventTypes} from 'utils/constants';
 import type {A11yFocusEventDetail} from 'utils/constants';
 import {isKeyPressed} from 'utils/keyboard';
 import {getCurrentMomentForTimezone} from 'utils/timezone';
-import {localizeMessage} from 'utils/utils';
 
 const CUSTOM_STATUS_TIME_PICKER_INTERVALS_IN_MINUTES = 30;
 
@@ -172,7 +171,7 @@ const DateTimeInputContainer: React.FC<Props> = (props: Props) => {
                             id='customStatus__calendar-input'
                             readOnly={true}
                             className='dateTime__calendar-input'
-                            label={localizeMessage('dnd_custom_time_picker_modal.date', 'Date')}
+                            label={formatMessage({id: 'dnd_custom_time_picker_modal.date', defaultMessage: 'Date'})}
                             onClick={() => handlePopperOpenState(true)}
                             tabIndex={-1}
                             inputPrefix={inputIcon}
diff --git a/webapp/channels/src/components/date_picker/date_picker.tsx b/webapp/channels/src/components/date_picker/date_picker.tsx
index 8dcdf113ee..cba26545bd 100644
--- a/webapp/channels/src/components/date_picker/date_picker.tsx
+++ b/webapp/channels/src/components/date_picker/date_picker.tsx
@@ -10,7 +10,7 @@ import {
     useInteractions,
     FloatingFocusManager,
     useDismiss,
-} from '@floating-ui/react-dom-interactions';
+} from '@floating-ui/react';
 import type {Locale} from 'date-fns';
 import React, {useCallback, useEffect, useState} from 'react';
 import {DayPicker} from 'react-day-picker';
@@ -31,7 +31,7 @@ type Props = {
 
 const DatePicker = ({children, datePickerProps, isPopperOpen, handlePopperOpenState, locale}: Props) => {
     const [loadedLocales, setLoadedLocales] = useState<Record<string, Locale>>({});
-    const {x, y, reference, floating, strategy, context} = useFloating({
+    const {x, y, strategy, context, refs: {setReference, setFloating}} = useFloating({
         open: isPopperOpen,
         onOpenChange: () => handlePopperOpenState(false),
         placement: 'bottom-start',
@@ -69,7 +69,7 @@ const DatePicker = ({children, datePickerProps, isPopperOpen, handlePopperOpenSt
     return (
         <div>
             <div
-                ref={reference}
+                ref={setReference}
                 {...getReferenceProps()}
             >
                 {children}
@@ -81,7 +81,7 @@ const DatePicker = ({children, datePickerProps, isPopperOpen, handlePopperOpenSt
                     initialFocus={-1}
                 >
                     <div
-                        ref={floating}
+                        ref={setFloating}
                         style={{
                             position: strategy,
                             top: y ?? 0,