How can I put the arrows in the center and outside the red border? React-multi-carousel

Question

I'm using react-multi-carousel, What I would like to do is to always have the arrows in the middle and outside the border-box, how can I do that? Is there any trick in css to acomplish this?

I tried to put the react-multiple-carousel__arrow--left and react-multiple-carousel__arrow--righft with position absolute but this will always put the arrows at the top of the page. Below is my code so far...

 <CarouselWrapper>
        <Carousel
          customLeftArrow={<CustomLeftArrow />}
          customRightArrow={<CustomRightArrow />}
          renderButtonGroupOutside={true}
          customButtonGroup={<ButtonGroup />}
          responsive={responsive}
          arrows={false}
        >
          <div className="image">1</div>
          <div className="image">2</div>
          <div className="image">3</div>
          <div className="image">4</div>
          <div className="image">5</div>
          <div className="image">6</div>
        </Carousel>
 </CarouselWrapper>

css

.image {
  height: 150px;
  width: 150px;
  font-size: 25px;
  margin: 10px;
  display: inline-block;
  line-height: 100px;
  border: 3px red solid;
}


 function CustomRightArrow({ onClick }) {
    return (
      <button
        onClick={handleClick}
        aria-label="Go to next slide"
        className="react-multiple-carousel__arrow react-multiple-carousel__arrow--right"
      />
    );
  }

  function CustomLeftArrow({ onClick }) {

    return (
      <button
        onClick={handleClick}
        aria-label="Go to previous slide"
        className="react-multiple-carousel__arrow react-multiple-carousel__arrow--left"
      />
    );
  }

  const ButtonGroup = ({ next, previous }) => {
    return (
      <div className="carousel-button-group">
        <CustomLeftArrow
          onClick={() => previous()}
        />
        <CustomRightArrow onClick={() => next()} />
      </div>
    );
  };