[form-builder] Wrap react-datepicker in Layer

This fixes a bug where since we used the React usePortal the popper
would render underneath the current Sanity UI `Layer`.

cypress/integration/datetimeInput.js

@@ -0,0 +1,28 @@
+describe('DatetimeInput react-datepicker popper', () => {
+  beforeEach(() => {
+    cy.visit(
+      '/test/desk/datetimeTest%2Ctemplate%3DdatetimeTest;b44f31f5-2cb0-431b-a912-aba0e1bf46cd'
+    )
+  })
+
+  it('should be rendered on top of array input dialog', () => {
+    cy.getField('inArray').within(($field) => {
+      cy.contains('Add').scrollIntoView().should('be.visible')
+      cy.contains('Add').click()
+    })
+
+    cy.getField('date').within(($dateField) => {
+      cy.get('button[title="Select date"]').click()
+    })
+
+    cy.get('.react-datepicker-popper').should('be.visible')
+  })
+
+  it('should be visible when clicking select date', () => {
+    cy.getField('justDefaults').within(($field) => {
+      cy.get('button[title="Select date"]').click()
+    })
+
+    cy.get('.react-datepicker-popper').should('be.visible')
+  })
+})

packages/@sanity/form-builder/src/inputs/DateInputs/BaseDateTimeInput.tsx

@@ -12,6 +12,7 @@ import Button from 'part:@sanity/components/buttons/default'
 import CalendarIcon from 'part:@sanity/base/calendar-icon'
 import {uniqueId} from 'lodash'
 import styles from './styles/BaseDateTimeInput.css'
+import {Layer} from '@sanity/ui'
 
 type Props = {
   value: Moment | null
@@ -106,9 +107,11 @@ export default class BaseDateTimeInput extends React.Component<Props, State> {
   }
   renderPopperContainer = ({children}) => {
     const {isDialogOpen} = this.state
-    return ReactDOM.createPortal(
-      <div className={isDialogOpen ? styles.portal : styles.portalClosed}>{children}</div>,
-      document.body
+
+    return (
+      <Layer>
+        <div className={isDialogOpen ? styles.portal : styles.portalClosed}>{children}</div>
+      </Layer>
     )
   }
   render() {