How can I get scroll-snap-type to work properly with React?

Question

I have a react app as follows:

function App() {
  return (
    <div className="app">
      <Topbar/>
      <div className="sections">
        <Intro/>
        <Portfolio/>
        <Works/>
        <Contact/>
      </div>
    </div>
  );
}

The 4 sections components have a css file as so:

.intro{
    background-color: rgb(243, 208, 208);
    width: 100vw;
    height: calc(100vh - 70px);
    scroll-snap-align: start;
}

And the app.js css file looks like so:

.app{
    height: 100vh;

    .sections{
        width: 100%;
        height: calc(100vh-70px);
        background-color: rgb(105, 179, 130);
        position: relative;
        top: 70px;
        scroll-snap-type: y mandatory;
    }
}

Essentially every components is a full sized page, and the idea is to have snap scrolling. Does anyone know why I can't seem to get it to work? Thanks!