I am react-multi-carousel library and i made custom buttons for it but i cant find a way on how to make buttons at the top of carousel instead it is at the bottom by default and position absoolute just messes everything on diferent screens.

const CustomButtonGroup = ({ next, previous }: any) => {
  return (
    <ButtonContainer>
      <div className="container-for-container">
        <section className="third-container">
          <div className="sidebar-buttons-container">
            <button className="left" type="button" onClick={() => previous()}>
              <SVGIconButtonArrow />
            </button>
            <div className="slash">/</div>
            <button className="right" type="button" onClick={() => next()}>
              <SVGIconButtonArrow className="arrow-right" />
            </button>
          </div>
        </section>
      </div>
    </ButtonContainer>
  );
};

export { CustomButtonGroup };

const ButtonContainer = styled.div`
  .container-for-container {
    /* position: relative; */

    position: relative;

    height: 100px;
    border: 3px solid #73ad21;
  }

  .third-container {
    /* position: absolute;
    top: 51.4rem;
    left: 65rem; */

    position: absolute;

    right: 0;
    width: 200px;

    border: 3px solid #73ad21;

    .sidebar-buttons-container {
      display: flex;
      margin-left: 25px;
      button {
        border: none;
        background-color: rgba(0, 0, 0, 0);
        color: ${({ theme }) => theme.colors.black000};
        font-weight: bold;
        font-size: 40px;
        z-index: 33;
        cursor: pointer;
      }

      .arrow-right {
        transform: rotate(180deg);
      }

      .slash {
        font-weight: 100;
        font-size: 40px;
        margin-top: 20px;
      }

      .left {
        padding-right: 20px;
      }

      .right {
        padding-left: 20px;
      }

      .left:active {
        transform: translateX(-4px);
      }

      .right:active {
        transform: translateX(4px);
      }
    }
  }

  /* ${med.xs} {
    top: 47.2rem;
    left: 12rem;
  }
  ${med.sm} {
    top: 46.3rem;
    left: 20rem;
  }
  ${med.custom({ min: 556, max: 1022 })} {
    top: 45.1rem;
    left: 32rem;
  }
  ${med.custom({ min: 1023, max: 1600 })} {
    top: 52.1rem;
    left: 78rem;
  } */
`;

i think you can only pass these buttons for carousel component for them to work else if you put them above carousel they wont work