[PLAY-1888] React Date Picker - initializeOnce - Reinitialization wit…

…h Other Inputs Bug (#4240)

**What does this PR do?** A clear and concise description with your
runway ticket url.

- Add prop, `initializeOnce`, which uses an empty dependency array in
useEffect to React Date Picker kit so flatpickr init runs only on first
render. If the prop is false, use undefined so date picker remains
unchanged.
- If a form had other inputs and date picker(s), any update to the
parent form's state would trigger a reinitialization to the date
picker(s). Now date pickers should initialize only once.

**How to test?** Steps to confirm the desired behavior:
1. In Nitro, go to a page with a React form that has the date picker and
other inputs in Safari
2. Type and make sure the React Date Picker does not "restart" on every
event / slows down other inputs.

#### Checklist:
- [x] **LABELS** Add a label: `enhancement`, `bug`, `improvement`, `new
kit`, `deprecated`, or `breaking`. See [Changelog &
Labels](https://github.com/powerhome/playbook/wiki/Changelog-&-Labels)
for details.
- [x] **DEPLOY** I have added the `milano` label to show I'm ready for a
review.

playbook/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx

@@ -29,6 +29,7 @@ type DatePickerProps = {
   hideLabel?: boolean,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
+  initializeOnce?: boolean,
   inLine?: boolean,
   inputAria?: { [key: string]: string },
   inputData?: { [key: string]: string },
@@ -73,6 +74,7 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
     hideLabel = false,
     htmlOptions = {},
     id,
+    initializeOnce = false,
     inLine = false,
     inputAria = {},
     inputData = {},
@@ -134,7 +136,7 @@ useEffect(() => {
     yearRange,
     required: false,
   }, scrollContainer)
-})
+}, initializeOnce ? [] : undefined)
   const filteredProps = {...props}
   if (filteredProps.marginBottom === undefined) {
     filteredProps.marginBottom = "sm"