Problems with React Scroll and scroll-snap-type

Question

I'm trying to use scroll-snap-type: y proximity;, but it isn't working well with react-scroll. I find that the page is scrolling in HTML tag and when I set overflow: hidden; for: html, body, .app and then overflow: scroll and height: 100vh; to the app__content scrolling isn't working as it should. I mean you're able to scroll but, unfortunately, you can't use smooth scrolling and the page is bugging. So instead of that, I want somehow set scroll-snap-type: y proximity; to HTML tag and scroll-snap-align: start; to their children.

App.js:

import './App.scss';
import Home from './components/Home/Home';
import {
  Switch,
  Route,
} from "react-router-dom";
import Nav from './components/Navigation/Nav';
import About from './components/About/About';
import Skills from './Skills/Skills';
import Projects from './components/Projects/Projects';


function App() {
  return (
    <div className="app">
      <Nav/>
      <div className="app__content">
          <Home name="home"/>
          <About name="about"/>
          <Skills name="skills"/>
          <Projects name="projects"/>
      </div>
    </div>
  );
}

export default App;

Nav.js:

import "./Nav.scss";
import { useEffect, useState } from "react";
import { Link, animateScroll as scroll } from "react-scroll";

const Nav = () => {
  const toggleHome = () => {
    scroll.scrollToTop();
  };
  return (
    <>
      <nav className="nav">
        <div className="nav__avatar">
          <h3>
            <Link onClick={toggleHome} to="/">
              DS
            </Link>
          </h3>
        </div>
        <ul className="nav__list">
          <li>
            <Link
              smooth={true}
              spy={true}
              duration={500}
              offset={-80}
              exact="true"
              className="nav__underline"
              activeClass="active"
              to="home"
            >
              Home
            </Link>
          </li>
          <li>
            <Link
              smooth={true}
              spy={true}
              duration={500}
              exact="true"
              offset={-80}
              className="nav__underline"
              activeClass="active"
              to="about"
            >
              About
            </Link>
          </li>
          <li>
            <Link
              smooth={true}
              spy={true}
              duration={500}
              exact="true"
              offset={-80}
              className="nav__underline"
              activeClass="active"
              to="skills"
            >
              Skills
            </Link>
          </li>
          <li>
            <Link
              smooth={true}
              spy={true}
              duration={500}
              exact="true"
              className="nav__underline"
              activeClass="active"
              to="projects"
            >
              Projects
            </Link>
          </li>
        </ul>
        <div className="nav__link">
          <Link to="/contact">Contact</Link>
        </div>
      </nav>
    </>
  );
};

export default Nav;

App.scss:

  html{
    overflow: scroll;
    scroll-snap-type: y mandatory;
  }
  // components
  section{
    scroll-snap-align: start;
  }

If something is unclear feel free to ask :)