Horizontal scroll in nav bar using styled component reactjs

I am working on react as a beginner. I have nav bar which has tabs. I have to use styled component only.

import styled from "styled-components";
import { Link } from 'react-router-dom';
const Header = (props) => {
  return (
    <>
    {/* this is for nav bar */}
    <Container backgroundColor="#F4F5F7">
    <NavMenu>
      
        <Link to="/">
          <ul>Home</ul>
        </Link>
        <Link to="/Ourteam">
          <ul>Our team</ul>
        </Link>
        <Link to="/Admissions">
          <ul>Admission</ul>
        </Link>
        <Link to="/Fees">
          <ul>Fee</ul>
        </Link>
        <Link to="/Services">
          <ul>Services</ul>
        </Link>
        <Link to="/Announcements">
          <ul>Announcements</ul>
        </Link>
        <Link to="/Gallery">
          <ul>Gallery</ul>
        </Link>
        <Link to="/Vacancy">
          <ul>Vacancy</ul>
        </Link>
        <Link to="/FAQ">
          <ul>FAQ</ul>
        </Link>
        <Link to="/Misc">
          <ul>Misc</ul>
        </Link>
      
        <Link to="/Aboutus">
          <ul>Aboutus</ul>
        </Link>
      </NavMenu>
    </Container>
    {/* this is for front bar */}
    <Container top="10px">
    <Logo>
      <a href="/">
        <img src="/images/Tree1.png" alt="" />
      </a>
    </Logo>
     
    
    <Login>Login</Login>
    <Signup>Create Account</Signup>
  

  </Container>
  </>
  );
};
//Styled-Components

const Container = styled.div`
  position: absolute;
  background-color: ${(props)=>props.backgroundColor};
  top: ${(props)=>props.top};
  left: 0;
  right: 0;
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: space-between;
  padding: 0px 30px;
  align-items: center;
  z-index: 1000;
  
`;

const Logo = styled.a`
  /* padding: 0; */
  width: 80px;
  /* font-size: 0; */
  /* display: inline-block; */
  align-items: center;

  a {
    cursor: auto;
    img {
      /* display: flex; */
      width: 550%;
      border-radius: 80px;
      /* align-items: leftr; */
    }
  }
`;

const Wrap = styled.div`
  align-items: center;
  display: flex;
  flex-flow: row nowrap;
  position: relative;
  top:500px;
  margin-right: auto;
  margin-left: auto;
  
`;

const NavMenu = styled.div`
  align-items: center;
  display: flex;
  flex-flow: row nowrap;
  height: 100%;
  justify-content: flex-end;
  margin: 0;
  padding: 0;
  position: relative;
  margin-right: auto;
  margin-left: 30px;

  a {
    text-decoration: none;
    display: flex;
    align-items: center;
    padding: 0 12px;

    span {
      color: black;
      font-size: 18px;
      letter-spacing: 1px;
      line-height: 1.08;
      padding: 1px 0;
      white-space: nowrap;
      position: relative;

      &:before {
        background-color: rgb(249, 249, 249);
        border-radius: 0 0 4px 4px;
        bottom: -6px;
        content: "";
        height: 2px;
        left: 0;
        opacity: 0;
        position: absolute;
        right: 0;
        transform-origin: left center;
        transform: scaleX(0);
        transition: all 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
        visibility: hidden;
        width: auto;
      }
    }

    &:hover {
      span:before {
        transform: scaleX(1);
        visibility: visible;
        opacity: 1 !important;
      }
    }
  }

  @media (max-width: 548px) {
    display: none;
  }
`;

const Signup = styled.a`
  color: #ffffff;
  background-color: #515C7D;
  padding: 10px 16px;
  margin-right: 80px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  border: 1px solid #f9f9f9;
  border-radius: 8px;
  transition: all 0.2s ease 0s;

  &:hover {
    background-color: #f9f9f9;
    color: #000;
    border-color: transparent;
  }
`;
const Login = styled.a`
  color: black;
  background-color: transparent;
  padding: 10px 16px;
  margin-left: 900px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  border: 1px solid black;
  border-radius: 8px;
  transition: all 0.2s ease 0s;

  &:hover {
    background-color: #f9f9f9;
    color: #000;
    border-color: transparent;
  }
`;

export default Header;

I want one button on left to scroll left and one button on right to scroll right. How can i accomplish this? i have found one package which can be added. Here is the package **https://www.npmjs.com/package/react-horizontal-scrolling-menu ** I am open to anyother option also. My main concern is how i can handle