Sliderjs and React desired behavior issues

I am fairly new to JS and so I try to do as much as I can before asking for help... I have been at this for days now and I cannot seem to figure out how to get the demo code from the link below to translate to react jsx. The documentation for sliderjs react is very limited and so deciphering it is extremely difficult for me. Is there any possible way to make this work?

https://codesandbox.io/s/v81ff

This demo is from this library: https://swiperjs.com/

My code is as I will post below:

import SwiperCore, { Navigation, Pagination, Scrollbar, A11y } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/react';
// import Swiper styles
import 'swiper/swiper-bundle.css';
import './App.css';

SwiperCore.use([Navigation, Pagination, Scrollbar, A11y]);

function App() {

  return (
    <Swiper
      spaceBetween={50}
      slidesPerView={3}
      navigation
      pagination={{ clickable: true }}
      scrollbar={{ draggable: true }}
    >
    <SwiperSlide>
      <Swiper
        spaceBetween={50}
        slidesPerView={1}
        navigation
        pagination={{ clickable: true, el: '.swiper-pagination-v' }}
        direction={{ vertical: true }}
        scrollbar={{ draggable: true }}

      >
        <SwiperSlide>Slide 1</SwiperSlide>
        <SwiperSlide>Slide 2</SwiperSlide>
        <SwiperSlide>Slide 3</SwiperSlide>
        <SwiperSlide>Slide 4</SwiperSlide>
      </Swiper>
    </SwiperSlide>

    <SwiperSlide>Slide 2</SwiperSlide>
    <SwiperSlide>Slide 3</SwiperSlide>
    <SwiperSlide>Slide 4</SwiperSlide>
  </Swiper>
);
};



export default App;

Including the code below has been shown to help, but it does not show up correctly on my system and simply produces errors:

import "swiper/swiper.scss";
import "swiper/components/navigation/navigation.scss";
import "swiper/components/pagination/pagination.scss";
import "swiper/components/scrollbar/scrollbar.scss";

./node_modules/swiper/swiper.scss (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--5-oneOf-6-3!./node_modules/react-scripts/node_modules/sass-loader/dist/cjs.js??ref--5-oneOf-6-4!./node_modules/swiper/swiper.scss)
Cannot find module 'sass'
Require stack:
- /home/codydyar/code/Video Platform/test/test/node_modules/react-scripts/node_modules/sass-loader/dist/utils.js
- /home/codydyar/code/Video Platform/test/test/node_modules/react-scripts/node_modules/sass-loader/dist/index.js
- /home/codydyar/code/Video Platform/test/test/node_modules/react-scripts/node_modules/sass-loader/dist/cjs.js
- /home/codydyar/code/Video Platform/test/test/node_modules/loader-runner/lib/loadLoader.js
- /home/codydyar/code/Video Platform/test/test/node_modules/loader-runner/lib/LoaderRunner.js
- /home/codydyar/code/Video Platform/test/test/node_modules/webpack/lib/NormalModule.js
- /home/codydyar/code/Video Platform/test/test/node_modules/webpack/lib/NormalModuleFactory.js
- /home/codydyar/code/Video Platform/test/test/node_modules/webpack/lib/Compiler.js
- /home/codydyar/code/Video Platform/test/test/node_modules/webpack/lib/webpack.js
- /home/codydyar/code/Video Platform/test/test/node_modules/react-scripts/scripts/start.js

After doing an install of sass, it appeared to start working better and allow those node errors to go away, but now any window resizing makes my horizontal stretch in size to an unreal height. I could set a set height, but it removes the dynamic sizing aspect of the page I am trying to create.