Multiple layers of overflowBoundaryElement on popover/dropdown components does not work correctly

At a high level, this library uses ReactDOM.unstable_renderSubtreeIntoContainer instead of the full featured React Portal feature. This can result in context not flowing through to items which are portaled, this is documented here: https://github.com/facebook/react/issues/16721 . This can result in a bug in the library when context is being used, namely for the PortalSettings and IconSettings.

Diving into the details, when having overflowBoundaryElement set on multiple components, multiple layers deep, the React context for the PortalSettings renderTo prop does not carry through the use of ReactDOM.unstable_renderSubtreeIntoContainer and loses it’s value. This is what it ends up looking like because it loses the context value and falls back to attaching to the body element instead of the proper portal destination that you provide it through PortalSettings. e.g. <PortalSettings renderTo=”#portal-destination>:

Steps to reproduce:

• Add a Popover component around a button, and have the a prop for Popover set to position=”overflowBoundaryElement”
• Add a Datepicker component to the body prop of the Popover component and have a Datepicker prop set to menuPosition=”overflowBoundaryElement”
• Open the popover, then try to open the datepicker to view calender.

E.g.

   <Popover
     body={<Datepicker menuPosition="overflowBoundaryElement" />}
     position="overflowBoundaryElement"
   >
     {children}
   </Popover>

Start with the Popover and Datepicker implementations for position/menuPosition="overflowBoundaryElement" and reproduce the nested case described in the issue. Trace how PortalSettings renderTo is carried through the nested rendering, then verify that the Datepicker attaches to the configured portal destination rather than the body.