<CarouselProvider
  value={{
    width: '100%',
    height: '100%',
    visibleCount: 1,
    visibleIndex: 1,
    totalSlides: 1,
    infinite: true,
    slideshow: false,
    slideshowDuration: 1000,
    transitionDuration: '0.4s',
  }}
>
  <Slider>
    <Slide
      index={1}
      styling={`
              border: 3px solid red;
          `}
    >
      <h1>hi</h1>
    </Slide>
  </Slider>
</CarouselProvider>

<CarouselProvider
  value={{
    width: '100%',
    height: '100%',
    visibleCount: 1,
    visibleIndex: 1,
    totalSlides: 1,
    infinite: true,
    slideshow: false,
    slideshowDuration: 1000,
    transitionDuration: '0.4s',
  }}
>
  <Slider
    buttonStyling={`
          border: none;
          background: transparent;
          box-shadow: 0 0 3px #121212;
          border-radius: 50%;
          transition: all 0.2s;
          outline:none;
          font-size: 22px;
          color: #121212;
          &:hover {
              box-shadow: 0 0 10px;
              transform: scale(1.1);
          }
      `}
    leftButtonText={<strong>{'<'}</strong>}
    rightButtonText={<strong>{'>'}</strong>}
  >
    <Slide index={1}>
      <h1>hi</h1>
    </Slide>
  </Slider>
</CarouselProvider>