Draft.js applying Custom decorator seems having no effect

Question

I try to make my First Decorator for my Draft.js. Based in the documentation so far I did:

A file named LinkDecorator.js:

import React from 'react';
import Utils from './Utils';

const Link= (props) => {
    console.log(props);
    return (
      <a href="http://google.com">GOOGLE</a>  
    );
}

const matchFunction = (contentBlock, callback, contentState) => {
    /**
     * Regex found in: https://stackoverflow.com/a/17773849/4706711
     */
    const regex=/(https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9]\.[^\s]{2,})/
    Utils.regexMatch(regex,contentBlock,contentState);
}

export default {
    'strategy': matchFunction,
    'component': Link
};

That uses the following file providing Utilities named Utils.js:

export default {
    /**
     * A utility function that is used on Composite Decorators for handling
     * regex - based text maniluplation.
     * @param {Regex} regex The regular expression to handle
     * @param {Object} contentBlock The content block that needs to get manipulated
     * @param {Function} callback A callback function that gets called when the regex matches
     */
    'regexMatch': (regex, contentBlock, callback)=>{
        const text = contentBlock.getText();
        let matchArr = regex.exec(text);
        let start;
        console.log("Block Content", text);
        while (matchArr !== null) {
          start = matchArr.index;
          callback(start, start + matchArr[0].length);
          matchArr = regex.exec(text);
        }
    },
}

And I try to usr in on the following editor:

import React, { Component } from 'react';
import { EditorState, CompositeDecorator } from 'draft-js';
import { Editor } from 'react-draft-wysiwyg';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';

import Link from './LinkDecorator';


class MyEditor extends Component {

    constructor(props){
      super(props);
      const compositeDecorator = new CompositeDecorator([Link]);
      this.state = {
        compositeDecorator,
        editorState: EditorState.createEmpty(compositeDecorator),
      };
    }
    
    onEditorStateChange: Function = (editorState) => {
      this.setState({editorState,});
    };
    
    render() {
      const { editorState } = this.state;
      return (
          <Editor
              editorState={editorState}
              wrapperClassName="demo-wrapper"
              editorClassName="demo-editor"
              onEditorStateChange={this.onEditorStateChange}
           />
      );
    }
}

export default MyEditor;

I also make available these examples on https://github.com/pc-magas/react-draft-wysiwyg-scenario/tree/text_manipulation. As you can see I try when a user provides types a link to the editor I try to insert a link for Google. But for some reason it just puts the user-provided link without any noticeable change.

Do you have any idea why? Also I want to know how I will solve this problem.

Edit 1

Over ./LinkDecorator.js I changed the matchFunction into:

const matchFunction = (contentBlock, callback, contentState) => {
    /**
     * Regex found in: https://stackoverflow.com/a/17773849/4706711
     */
    const regex=/(https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9]\.[^\s]{2,})/
    Utils.regexMatch(regex,contentBlock,callback);
}

Still no changes into the pasted link.