Refs to child elements are not available in parent's first `useEffect` / `useLayoutEffect`

[NotYoojun]

Description

I've noticed that refs to DOM elements rendered inside <NewWindow> have different timing behavior compared to normal React rendering. The ref is not populated during the parent component's first effect execution, which can lead to unexpected undefined errors.

Reproduction

import React, { useRef, useEffect } from 'react';
import NewWindow from 'react-new-window';

function App() {
  const inputRef = useRef(null);
  
  useEffect(() => {
    console.log('Effect run, inputRef.current:', inputRef.current);
    
    // Expected: HTMLInputElement
    // Actual: undefined
    if (inputRef.current) {
      inputRef.current.focus();
    }
  }, []);
  
  return (
    <NewWindow>
      <input ref={inputRef} placeholder="Should auto-focus" />
    </NewWindow>
  );
}

Expected Behavior

The ref should be populated before the parent component's useEffect runs, just like normal React rendering:

function NormalCase() {
  const inputRef = useRef(null);
  
  useEffect(() => {
    console.log(inputRef.current); // ✅ HTMLInputElement
    inputRef.current.focus(); // ✅ Works
  }, []);
  
  return <input ref={inputRef} />;
}

Actual Behavior

With <NewWindow>, the ref is undefined in the first effect execution:

<NewWindow>
  <input ref={inputRef} /> {/* ref is assigned AFTER parent's useEffect */}
</NewWindow>

Impact

This affects common patterns like:

• Auto-focusing inputs in the new window
• Measuring DOM elements on mount
• Initializing third-party libraries that need DOM references
• Any imperative DOM operations in useEffect/useLayoutEffect