当我在输入文本中键入@时，它应该在react中以不同的颜色显示

import React, { useState } from 'react';

const TextEditor = () => {
  const [text, setText] = useState('');

  const handleTextChange = (event) => {
    setText(event.target.value);
  };

  const renderColoredText = () => {
    const regex = /@/g;
    const matches = text.match(regex);

    if (matches) {
      return text.split(regex).map((part, index) => (
        <React.Fragment key={index}>
          {part}
          {index !== matches.length && (
            <span style={{ color: 'red' }}>@</span>
          )}
        </React.Fragment>
      ));
    }

    return text;
  };

  return (
    <div>
      <textarea value={text} onChange={handleTextChange} />
      <div>{renderColoredText()}</div>
    </div>
  );
};

export default TextEditor;