title: Double Scroll with react-spring parallax & react-three-fiber `Canvas`
body: <p>I am trying to create a scrolling box with <code>parallax</code> but for some reasons it won't bound with <code>Canvas</code> element, even if I will include both under the same <code>&lt;div&gt;</code>.</p>
  <p>In this screenshot, you can see div1 and div2 where each has its own scroll feature...
  <a href="https://i.stack.imgur.com/froLk.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/froLk.jpg" alt="screenshoot double scroll bar" /></a></p>
  <p>Tried in a separate divs
  <a href="https://i.stack.imgur.com/MWBDk.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MWBDk.jpg" alt="sep div" /></a></p>
  <p>And even under the same div, still can't get rid of the double scroll. Any ideas?
  <a href="https://i.stack.imgur.com/7DZ4J.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7DZ4J.jpg" alt="under same div" /></a>
  <a href="https://i.stack.imgur.com/RYtFm.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RYtFm.jpg" alt="default funct" /></a></p>
  <p>Or <code>react-spring</code> <strong>parallax</strong> isn't compatible with <code>react-three-fiber</code> and that's why there is a library <code>react-three-flex</code>?</p>
  <p>Here is the <a href="https://codesandbox.io/s/funny-moore-4epe4?file=/pages/index.js" rel="nofollow noreferrer">codesandBox</a></p>