Мимическое текстовое поле в div

используя React, я пытаюсь создать компонент для выделения текста.

Для этого у меня есть элемент textarea и div на одном уровне, копирующие значение textarea в div. Мой код ниже.

Текстовое поле находится внутри компонента TextArea, а div - внутри компонента HighlightedDiv.

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

Где-то я обнаружил, что добавление этого к стилю CSS css для div исправляет следующее:

white-space: pre;

И это так, но теперь я также хочу, чтобы мой текст продолжал переноситься, когда он достигает границы div, как это происходит, когда я использую следующий css:

white-space: normal;
word-wrap: break-word;

Проблема, очевидно, в том, что мне нужны как white-space: pre, так и white-space: normal. Что, чтобы быть предельно ясным, невозможно.

Кто-нибудь знает другой способ достичь того, чего я хочу?

Мой код:

(Я использую библиотеку стилей s, стилизованные компоненты, поэтому элементы StyledTextArea и Div ниже представляют собой просто текстовое поле и div соответственно.)

HighlightTextArea (родительский):

import React, { Component } from 'react'
import styled from 'styled-components'

import HighlightDiv from './HighlightDiv'
import TextArea from './TextArea'

const Container = styled.div`
  border: 1px green solid;
  width: 100vh;
  padding: 20px;
`


export default class HighlightTextArea extends Component {
  constructor() {
    super()
    this.state = {
      text: ''
    }
  }
  setHighlightTextAreaState = (newStateObject) => {
    for (let key in newStateObject) {
      this.setState({ [key]: newStateObject[key] })
    }
  }
  render() {
    return (
      <Container>
        <TextArea setHighlightTextAreaState = {this.setHighlightTextAreaState}/>
        <HighlightDiv text = {this.state.text}/>
      </Container>
    );
  }
}

TextArea (Дочерний):

import React, { Component } from 'react'
import styled from 'styled-components'

const StyledTextArea = styled.textarea`
  border: 1px solid blue;
  font-family: 'Inconsolata', monospace;
  font-size: 1rem;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 20;
  color: blue;
  opacity: 0.5;
`

export default class TextArea extends Component {
  constructor(props) {
    super(props)
  }
  handleChangeEvent = (event) => {
    console.info("TextArea.handleChangeEvent - event.target.value:")
    console.info("\"" + event.target.value + "\"")
    console.info("TextArea.handleChangeEvent - event.target.value.length: " + event.target.value.length)
    this.props.setHighlightTextAreaState({
      text: event.target.value,
    })
  }
  // componentDidMount() {
  //   let textAreaRect = document.getElementById("text-area").getBoundingClientRect()
  //
  // }
  render() {
    return (
      <StyledTextArea id = "text-area" onChange = {this.handleChangeEvent}></StyledTextArea>
    );
  }
}

HighlightDiv (Дочерний):

import React, { Component } from 'react'
import styled from 'styled-components'

const Div = styled.div`
  border: 1px solid red;
  font-family: 'Inconsolata', monospace;
  font-size: 1rem;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  color: red;
  text-align: left;
  white-space: normal;
  word-wrap: break-word;
`


export default class HighlightDiv extends Component {
  constructor(props) {
    super(props)
  }
  renderTextHtml = () => {
    // Loop over all characters in this.props.text
    // Check if character is space or enter
  }
  render() {
    return (
      <Div>
        {this.props.text}
      </Div>
    )
  }
}