DraftJs with react, decorator not working

Question

im trying to create my own decorator, but its not working. its soppuse to do some styling to the word im inputing in my search field
input field

 <Editor
              editorState={this.props.editorState}
              onChange={this.handleOnChange}
      
          />
          <div>
            <input
                value={this.props.searchState}
                onChange={this.props.onChangeSearch}
                placeholder="Search..."
            />

my Decorator

const generateDecorator = (highlightTerm) => {
  const regex = new RegExp(highlightTerm, 'g');
  return new CompositeDecorator([{
    strategy: (contentBlock, callback, contentState) => {
      if (highlightTerm !== '') {
        findWithRegex(regex, contentBlock, callback);
      }
    },
    component: SearchHighlight,
  }]);
};

my "Styling" component

class SearchHighlight extends Component {
  render() {
    return (
        <span style={{fontSize: '32', backgroundColor: 'green', width: 40, height: 40}}>
        {this.props.children}
      </span>
    );
  }

implementing the decorator

  onChangeSearch = (e) => {
    const search = e.target.value;
    this.setState({
      search,
      editorState: EditorState.set(this.state.editorState, {decorator: generateDecorator(search)}),
    });
  };