There is a div with a bunch of spans inside of it like so:

<div id="wordDisplayWrapper">
  {words.map((word, i) => {
    if (i === idx) {
      return (
        <span key={i} className={"currentWord"}>
          {word}
        </span>
      );
    } else {
      return (
        <span key={i} className={classes[i] || "word"}>
          {word}
        </span>
      );
    }
  })}
</div>;

The spans will overflow off the div, and overflow has been set to overflow-y: hidden;, this is the CSS:

#wordDisplayWrapper {
  height: 5.5em;
  overflow-y: hidden;
  outline: 1px solid orange;
}

The currentWord changes, and as it indexes forward, it overflows the div. I would like the div to scroll to this currentWord automatically, but I have not been able to find a way to do this. How should I go about this in React?

Thanks!