Прокрутка вниз в процентах в React

Question

Я провожу тестирование набора текста в React и пытаюсь реализовать некоторые пользовательские функции прокрутки.

По сути, после того, как я закончил печатать все символы в первой строке, я хочу, чтобы он прокрутился вниз и показал следующую строку вверху, скрывая видимость уже набранной строки. Затем повторите это поведение для всех строк.

Как я могу выполнить sh это?

https://codesandbox.io/s/gracious-leaf-p7cd9?file= / src / App. js: 0- 226

import React from "react";
import "./styles.css";
import styled from "styled-components"

const sentence = "It was the best of times, it was the blurst of times. You stupid monkey! It was the best of times, it was the blurst of times. You stupid monkey! It was the best of times, it was the blurst of times. You stupid monkey! It was the best of times, it was the blurst of times. You stupid monkey! It was the best of times, it was the blurst of times. It was the best of times, it was the blurst of times. It was the best of times, it was the blurst of times. It was the best of times, it was the blurst of times. It was the best of times, it was the blurst of times.";

const StyledWordBox = styled.div`
    width: 50vw;
    height: 50vh;
    display: flex;
    flex-wrap: wrap;
    position: relative;
    margin: 0 auto;
    background-color: green;
    overflow: auto;
`

export default function App() {
  return (
    <StyledWordBox>
        {sentence}
    </StyledWordBox>
  )
}