title: react-virtuoso: overscan props does not work
body: <p>I'm using <code>react-virtuoso</code> library to render a simple virtual list. The code is very straightforward. I pass this <code>overscan</code> props and expect the virtual list to render <code>n</code> items above and below the viewport but it's not working.</p>
  <p>The <code>ExpensiveComponent</code>s still renders 'loading...' text when I'm scrolling up and down a little. Here is the code:</p>
  <pre class="lang-js prettyprint-override"><code>import { Virtuoso } from &quot;react-virtuoso&quot;;
  import { useEffect, useState, useRef, PropsWithChildren } from &quot;react&quot;;
  
  function ExpensiveComponent({ children }: PropsWithChildren&lt;{}&gt;) {
    const [render, setRender] = useState(false);
    const mountRef = useRef(false);
  
    useEffect(() =&gt; {
      mountRef.current = true;
  
      setTimeout(() =&gt; {
        if (mountRef.current) {
          setRender(true);
        }
      }, 150);
  
      return () =&gt; void (mountRef.current = false);
    }, []);
  
    return (
      &lt;div style={{ height: 150, border: &quot;1px solid pink&quot; }}&gt;
        {render ? children : &quot;Loading...&quot;}
      &lt;/div&gt;
    );
  }
  </code></pre>
  <h3>Usage</h3>
  <pre class="lang-js prettyprint-override"><code>function App() {
    return (
      &lt;Virtuoso
        style={{ height: &quot;400px&quot; }}
        totalCount={200}
        overscan={3} // ----------&gt; this line does not work
        itemContent={(index) =&gt; {
          return &lt;ExpensiveComponent&gt;{index}&lt;/ExpensiveComponent&gt;;
        }}
      /&gt;
    );
  }
  </code></pre>
  <p><a href="https://codesandbox.io/s/nice-wilson-2rotl?fontsize=14&amp;hidenavigation=1&amp;theme=dark" rel="nofollow noreferrer"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="Edit 66622199/react-virtuoso-overscan-props-does-not-work" /></a></p>