title: Implement a direct scroll down and top to a component with wheel
body: <p>I'm trying to clone the scrolling behavior from the <a href="https://www.tesla.com/fr_fr" rel="nofollow noreferrer">tesla</a> homepage website. The behavior is the next one, when the user scroll once, it goes to the section under.</p>
  <p>I know how to implement a basic scroll with a <code>useRef</code>, but here, I have to scroll through 5 sections with the same scrolling top and down behavior and I have no idea how I could manage that as clean as possible. I first thought of using an array of <code>const ref = useRef([])</code>, but when I tried to access the <code>scrollIntoView</code> method, it says that it's undefined..
  Here is my sections</p>
  <pre class="lang-js prettyprint-override"><code>import React from 'react';
  import { Model } from './Model';
  import tesla from './assets/modelY.jfif'
  import m3 from './assets/m3.jfif'
  import ms from './assets/ms.jfif'
  import mx from './assets/mx.jfif'
  import solar from './assets/solar.jfif'
  
  export const Home = () =&gt; {
      return (
          &lt;div&gt;
              &lt;section&gt;
                  &lt;Model models={'Model Y'} image={tesla} /&gt;
              &lt;/section&gt;
              &lt;section&gt;
                  &lt;Model models={'Model 3'} image={m3} /&gt;
              &lt;/section&gt;
              &lt;section&gt;
                  &lt;Model models={'Model S'} image={ms} /&gt;
              &lt;/section&gt;
              &lt;section&gt;
                  &lt;Model models={'Model X'} image={mx} /&gt;
              &lt;/section&gt;
              &lt;section&gt;
                  &lt;Model models={'Systèmes d\'énergie solaire et Powerwalls'} image={solar} /&gt;
              &lt;/section&gt;
          &lt;/div&gt;
      )
  };
  </code></pre>