React Parallax responsive background image not working as expected, not moving along scrolls

What Im triying to archieve is a horizontal Parallax effect. I have/want a big background photo covering the whole page, that I want to slide whenever the user scroll, just the exact amout of pixels regarding the amount of slides. (Responsive, If I have 3 an 33% each scroll, etc). Also wheen the user visits the page in the mobile version things will aply the exact same way, but the orientation will be vertical. Im using react-parallax for this, but I just can't make it work. Right now only the slides move.

My css

  background-image: url(./Assets/DavidRotate.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  opacity: 1;
  transition: background 300ms ease-in 200ms;
}

.fade-in {
  background-image: url(./Assets/DavidRotate.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  animation: fadeIn ease 3s;
  -webkit-animation: fadeIn ease 3s;
  -moz-animation: fadeIn ease 3s;
  -o-animation: fadeIn ease 3s;
  -ms-animation: fadeIn ease 3s;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-moz-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-o-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-ms-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

body {
  margin: 0;
  padding: 0;
}
.slide {
  width: 100vw;
  height: 100vh;
}

.bg {
  width: 100vw;
  height: 100vh;
  background-image: url(./Assets/DavidRotate.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

  top: 0px;
  left: 0px;
}

.wrapper {
  display: flex;
  flex-direction: row;
  width: 400vw;
  transform: rotate(90deg) translateY(-100vh);
  transform-origin: top left;
}

.outer-wrapper {
  width: 100vh;
  height: 100vw;
  transform: rotate(-90deg) translateX(-100vh);
  transform-origin: top left;
  overflow-y: scroll;
  overflow-x: hidden;
  /*position: absolute;*/
  scrollbar-width: none;
  -ms-overflow-style: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  top: 0px;
  left: 0px;
  animation: fadeIn ease 3s;
  -webkit-animation: fadeIn ease 3s;
  -moz-animation: fadeIn ease 3s;
  -o-animation: fadeIn ease 3s;
  -ms-animation: fadeIn ease 3s;
}

::-webkit-scrollbar {
  display: none;
}

.slide {
  width: 100vw;
  height: 100vh;
}

.one {
  background: #efdefe;
  opacity: 0.5;
}
.two {
  background: #a3f3d3;
  opacity: 0.5;
}
.three {
  background: #0bbaa0;
  opacity: 0.5;
}
.four {
  background: #00dfdf;
  opacity: 0.5;
}

And my .JS

import { Parallax, Background } from "react-parallax";
import ReactDOM from "react-dom";
import imagen from "./Assets/David.jpg";

function App() {
  return <Container></Container>;
}

const Container = () => (
  <Parallax strength={100}>
    <Background>
      <div className="bg" />
    </Background>
    <div className="outer-wrapper">
      <div className="wrapper">
        <div className="slide one">test</div>
        <div className="slide two">test2</div>
        <div className="slide three">test3</div>
        <div className="slide four">test4</div>
      </div>
    </div>
  </Parallax>
);

export default App;
ReactDOM.render(<App />, document.getElementById("root"));