fix: incorrect locale registration in datepicker (#9516)

### What?
This log was appearing when the DatePicker loaded without a registered
locale:
```
A locale object was not found for the provided string ["enUS"].
```
Also fixes css misalignment of icons inside date picker field

### Why?
If i`18n.dateFNS` had not loaded, we were registering the locale with an
undefined value.

### How?
Only register the locale for react-datepicker if i18n.dateFNS is
present.

Author: JarrodMFlesch

packages/ui/src/elements/DatePicker/DatePicker.tsx

@@ -2,7 +2,7 @@
 import type { ReactDatePickerProps } from 'react-datepicker'
 
 import React from 'react'
-import ReactDatePickerDefaultImport, { registerLocale } from 'react-datepicker'
+import ReactDatePickerDefaultImport, { registerLocale, setDefaultLocale } from 'react-datepicker'
 const ReactDatePicker = (ReactDatePickerDefaultImport.default ||
   ReactDatePickerDefaultImport) as unknown as typeof ReactDatePickerDefaultImport.default
 
@@ -38,14 +38,6 @@ const DatePicker: React.FC<Props> = (props) => {
   // Use the user's AdminUI language preference for the locale
   const { i18n } = useTranslation()
 
-  const datepickerLocale = getFormattedLocale(i18n.language)
-
-  try {
-    registerLocale(datepickerLocale, i18n.dateFNS)
-  } catch (e) {
-    console.warn(`Could not find DatePicker locale for ${i18n.language}`)
-  }
-
   let dateFormat = customDisplayFormat
 
   if (!customDisplayFormat) {
@@ -99,6 +91,18 @@ const DatePicker: React.FC<Props> = (props) => {
     .filter(Boolean)
     .join(' ')
 
+  React.useEffect(() => {
+    if (i18n.dateFNS) {
+      try {
+        const datepickerLocale = getFormattedLocale(i18n.language)
+        registerLocale(datepickerLocale, i18n.dateFNS)
+        setDefaultLocale(datepickerLocale)
+      } catch (e) {
+        console.warn(`Could not find DatePicker locale for ${i18n.language}`)
+      }
+    }
+  }, [i18n.language, i18n.dateFNS])
+
   return (
     <div className={classes}>
       <div className={`${baseClass}__icon-wrap`}>
@@ -117,7 +121,6 @@ const DatePicker: React.FC<Props> = (props) => {
         <ReactDatePicker
           {...dateTimePickerProps}
           dropdownMode="select"
-          locale={datepickerLocale}
           showMonthDropdown
           showYearDropdown
         />

packages/ui/src/elements/DatePicker/index.scss

@@ -39,7 +39,7 @@ $cal-icon-width: 18px;
     }
 
     .icon--calendar {
-      top: base(0.625);
+      top: base(0.5);
       right: base(0.75);
       width: $cal-icon-width;
       pointer-events: none;