Infinite scrolling css right to left, React

.marquee {
    height: 100%;
    width:100%;
    overflow: hidden;
    position: relative;
}

.marqueeContentContainer {
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content: space-evenly;
    height: 100%;
    -moz-animation: scroll-left 20s linear infinite;
    -webkit-animation: scroll-left 20s linear infinite;
    animation: scroll-left 20s linear infinite;
}

.marqueeContentContainer2 {
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content: space-evenly;
    height: 100%;
    -moz-animation: scroll-left 20s linear infinite;
    -webkit-animation: scroll-left 20s linear infinite;
    animation: scroll-left 20s linear infinite;
    animation-delay: 10s;
}

@keyframes scroll-left {
    0% {
        transform: translate(100%, 0);
    }
    100% {
        transform: translate(-100%, 0);
    }
}

<div class='marquee'>
  <div class='marqueeContentContainer'>
    <p>Hi</p>
    <p>Hi</p>
    <p>Hi</p>
    <p>Hi</p>
    <p>Hi</p>
  </div>
  <div class='marqueeContentContainer2'>
    <p>Hi</p>
    <p>Hi</p>
    <p>Hi</p>
    <p>Hi</p>
    <p>Hi</p>
  </div>
</div>