How to highlight hashtags in input elemets in React?

I have a react app with a text input with multiple lines. I have a regular expression to check a hashtag (words starting with #). The function I created to check hashtags is working and I'm getting the filtered hashtags in console.log, but the problem is I'm unable to highlight (bold text) the hashtags in the text. I can see the problem is the way I'm replacing the text in the state. But I'm not sure how to do it correctly. How can I do it?

Component :

import TextField from '@material-ui/core/TextField';

class CreateText extends Component {
  constructor(props) {
    super(props);
    this.state = {
      text: '',
    }
  }

handleInputChange = (e) => {
    this.setState({ text: e.target.value }, () =>
      this.matchHashTags(this.state.postText)
    )
}

matchHashTags = (text) => {
    var string = text;
    var regex = /#(\w*[0-9a-zA-Z]+\w*[0-9a-zA-Z])/gi;
    var matches = string.matchAll(regex);
    for (var match of matches) {
      string = string.replace(match[0], <b>{match[0]}</b>);
      this.setState({ text: string })
    }
}

render() {
    return(
        <TextField
            id="outlined-multiline-static"
            className="inputText"
            multiline
            onChange={this.handleInputChange}
            placeholder="Enter text"
        />
    )
}

export default CreateText;