如何在react中将段落中存在的双"OO“单词转换为绿色正方形？例如clooney -cl[绿色正方形]ey

import React, { Component } from 'react';

class ParagraphConverter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      paragraph: "clooney -cl[绿色正方形]ey"
    };
  }

  render() {
    const paragraph = this.state.paragraph;
    const modifiedParagraph = paragraph.replace(/\b\w*oo\w*\b/gi, '<span style={{backgroundColor: "green", display: "inline-block", width: "1em", height: "1em"}}></span>');

    return (
      <div dangerouslySetInnerHTML={{__html: modifiedParagraph}}></div>
    );
  }
}

export default ParagraphConverter;