Давать разные слова в <input>или <textarea>разных стилях с помощью React / JS

Question

В приведенном ниже коде я записываю индекс текста в пределах <textarea>, который выделил пользователь:

import React from "react";
import "./styles.css";

class App extends React.Component {
  onMouseUp = e => {
    let textVal = this.refs.myTextarea;
    let cursorStart = textVal.selectionStart;
    let cursorEnd = textVal.selectionEnd;
    console.log("Highlighted text: ", textVal);
    console.log("Highlighted text index start: ", cursorStart);
    console.log("Highlighted text index end: ", cursorEnd);
  };

  render() {
    return (
      <div className="App">
        <textarea ref="myTextarea" onMouseUp={e => this.onMouseUp(e)} />
      </div>
    );
  }
}

export default App;

То, что я хотел бы сделать , это выделение (т.е. цвет фона для), который задает c текст в текстовой области . Но я не могу понять, как это сделать. У кого-нибудь есть идеи? Похоже, есть пакеты, которые будут выделять определенные c слова в текстовой области, но ни один из них не сможет сделать это специально по индексу.