I am building a typing test webapp with ReactJS and currently I am stuck on implementing auto scroll.
In my react code, I have a state variable named ‘typedText’ which contains the currently typed text by the user. The full text to be typed is stored in a state array ‘allTexts’ which contains all paragraphs and the current paragraph is located with a ‘currentTextIndex’

   const [allTexts, setAllTexts] = useState([
   {title: 'Demo', text: "One of you must come here"}
   ])
   const [currentTextIndex,setCurrentTextIndex] = useState(0);
   const [typedText, setTypedText] = useState('');
   const [invalidKeys, setInvalidKeys] =             useState(['Shift','Control','Alt','CapsLock','Backspace','Tab'])

   function keyDownHandler(e){ //This function updated the typed text
   e.preventDefault();
   
   if(!startTime && !(invalidKeys.includes(e.key))){ //Starting the timer if the user has pressed  a valid key and the timer is not already started
     let dtObj = new Date();
     setStartTime(dtObj.getTime());
   }


   if(invalidKeys.includes(e.key)){ //If user types invalid key, then check if it is backspace,
   //and perform backspace operation if it is allowed in configuration 
     if(e.key === 'Backspace' && config.backspaceAllowed && startTime && typedText.length>0){
       let typedTextCopy = typedText.slice(0,typedText.length-1);
       setTypedText(typedTextCopy);
     }
   } else { //Otherwise, simply append the typed key into the typedText
       let typedTextCopy = typedText + e.key;
       setTypedText(typedTextCopy);
   }

The text on the screen is displayed in a simple div and not in a HTML Input as below –

    import React from 'react'

  export default function TextDisplay({givenText,typedText}) {
  let typedArray = typedText.split('');
  let givenArray = givenText.split('');
  return (
      <div className='text-justify w-4/5 sm:w-3/5 text-base sm:text-lg md:text-xl lg:text-2xl h-full overflow-y-auto p-1'>
          {givenArray.map((val, ind) => {
              if (val == typedArray[ind] && ind < typedArray.length) { //Characters which are correctly been typed
                //spans cannot be used dur to certain problems with them, so we will use divs with inline display to animate the cursor border properly
                  return <div key={ind} className={`${ind === typedArray.length - 1 ? 'border-r-2' : ''} ${typedArray.length === 0 && ind === 0? 'border-l-2' : ''} character inline border-purple-500 text-purple-700`}>{val}</div>
                } else if(val !== typedArray[ind] && ind < typedArray.length){ //Characters which have been typed incorrectly
                  return <div key={ind} className={`${ind === typedArray.length - 1 ? 'border-r-2' : ''} ${typedArray.length === 0 && ind === 0? 'border-l-2' : ''} character inline border-purple-500 ${val===' '?'underline decoration-red-500':'text-red-500'}`}>{val}</div>
              } else { //Characters not typed yet
                  return <div key={ind} className={`${ind === typedArray.length - 1 ? 'border-r-2' : ''} ${typedArray.length === 0 && ind === 0? 'border-l-2' : ''} character inline border-purple-500 text-slate-400`}>{val}</div>
              }
          })}
          

      </div>
  )
}

Here is the url of website – https://shubhamsharma64337.github.io/simpletype/

Link to repo – https://github.com/ShubhamSharma64337/simpletype

How do I implement auto scroll such that when the paragraph is large, and the user reaches the end of the visible text, the div is scrolled automatically?

I tried to think of splitting the paragraph into multiple parts of smaller length which does not need to be scrolled, and simply replacing the current part with next part once the user finishes one part by checking the length of text typed by the user and comparing it with the length of the part. But I think that there must be a better way to do this.