[BUG] using react-laag in a child window via React portals renders in the parent window

[scarroll2]

Describe the bug
My scenario is that I was opening a React portal into a new browser window. In this new window a component uses react-laag (via useLayer) to render dropdown options. This initially renders the react-laag later in the parent (opening) browser window instead of the new (child) window.

I expected passing a reference to the child window via the environment prop to just "work" out of the box.

When this did not, I used the container function to dynamically create a root div inside the child window.

This still didn't work because, for some reason, calling instanceof HTMLElement from the parent window's JavaScript context returned false on the HTMLElement created in the child window and thus, this error was thrown:

react-laag: You've passed a function to the 'container' prop, but it returned no valid HTMLElement

As a work-around I was able to set the prototype of the newly created div like so:

Object.setPrototypeOf(container, HTMLElement.prototype);

To Reproduce
Steps to reproduce the behavior:

1. Create a new window reference using window.open(...) and set it as the target to ReactDOM.createPortal.

const newWindow = window.open(
    undefined,
    undefined,
    'toolbar=no, location=no, directories=no, status=no, menubar=no'
);

2. In the react tree within the portal render a component that uses useLayer

const portal = ReactDOM.createPortal(
    <WrapperComponent
        childWindow={newWindow}
    />,
    newWindow.document.body
);

3. Use an implementation as described above to dynamically create a container in the child window and pass it to the container factory function in useLayer

// note this is simplified and just for illustration

import { useLayer } from "react-laag";
interface Props {
    childWindow: Window;
}

function WrapperComponent({childWindow}: Props){
    const { renderLayer } = useLayer({
        environment: childWindow,
        container: () => createDivIn(childWindow)
    })
    return (
        <div>
            {renderLayer(
                <div>
                    Content goes here!
                </div>
            )}
        </div>
    );
}

4. See error

Expected behavior
It would be great if setting the "environment" (or some other prop) allowed the react-laag container to "just work" and render the container into the child window without needing to dynamically create a container in the child window and pass it into container.

That said, I would expect a div created via a standard window's document API to work when passed into the container function without the need to override its prototype.

Browser / OS:

• OS: mac os
• Browser: chrome
• Version: 117.0.5938.62

Additional context
I know this is a pretty extreme edge-case, but others might run into this problem and it was not very easy to diagnose.

If nothing else, it would be helpful to document this as a known "gotcha" and to list the workaround.

Thanks!