i have a code here, which I am trying to change '**oo**' into **green square** thru CSS stylings , but with this code below I am getting first green square and then word, is there any way to get right result. for ex: "clooney" must be "**cl❎ ney**" (imagine this icon is green square), but thru this code below I am getting "**❎ clney**".
example: bloomer

right answer: **bl❎ mer**

**NOT=====>>>> ❎ blmer**

```
import React, { Component } from "react";

export default class Hello extends Component {
  constructor() {
    super();
    this.state = { modifiedPar: "", newPar: "modified paragraph will be here" };
  }

  greenMaker = (word) => {
    const wordAreas = word.split("oo");
    const newWords = wordAreas.flatMap((word) => [word, "oo"]);
    newWords.pop(); // remove the last 'oo'
    return newWords.map((word) => {
      if (word == "oo") {
        return <span className="box green"></span>; 
      }
      return <span>{word}</span>;
    });
  };

  ezEngReader = (par) => {
    var greenMakerVar = this.greenMaker(par);
    return greenMakerVar;
  };

  handleFormInput = (e) => {
    this.setState({
      modifiedPar: e.target.value
    });
  };

  handleSubmit = () => {
    this.setState({
      newPar: this.ezEngReader(this.state.modifiedPar)
    });
  };

  componentWillMount() {}

  render() {
    return (
      <div>
        <h1>EZEngReader</h1>
        <textarea
          name=""
          type="text"
          onChange={this.handleFormInput}
          className="form-control"
          id=""
          placeholder="write or paste your text here"
        />
        <button onClick={this.handleSubmit}>submit</button>
        <p style={{ fontSize: "20px" }}>{this.state.newPar}</p>
      </div>
    );
  }
}

.box {
  float: left;
  height: 20px;
  width: 20px;
  margin-bottom: 15px;
  border: 1px solid black;
  clear: both;
}

.green {
  background-color: green;
}

```