title: ReactJS - <Linkify> and <Highlighter> components don't work together
body: <p>In my current assignment in ReactJS, I was requested to render a string which contains url addresses,
  so those urls' will be clickable links and the text will be highlighted by search words.</p>
  
  <p>Thus, I made a component which imported "react-linkify" and "react-highlight-words" components.</p>
  
  <p>If I use  component on its own, then the url addresses will be converted to clickable links.
  So for the  component as its own that the text will be highlighted by search word as expected.</p>
  
  <p>When I used both of them, the  component functionality works but 
  the  component doesn't render the urls to links.</p>
  
  <p>I've tried every solution I could search in Google, even making my own linkify using Regular Expressions but then the links still stays as a string and not rendered as clickable links.</p>
  
  <p>My code from the CodeSandBox.io:</p>
  
  <pre><code>import React from "react";
  import ReactDOM from "react-dom";
  import Linkify from "react-linkify";
  import Highlighter from "react-highlight-words";
  
  import "./styles.css";
  
  function App() {
    let text =
      "Hello CodeSandbox. Start editing to see some magic happen! Click to see this video: https://www.youtube.com/watch?v=VMcPWuQ7IeE ";
  
    return (
      &lt;div className="App"&gt;
        &lt;Linkify&gt;
          &lt;Highlighter
            highlightClassName="YourHighlightClass"
            searchWords={["magic", "video"]}
            autoEscape={true}
            textToHighlight={text}
          /&gt;
        &lt;/Linkify&gt;
      &lt;/div&gt;
    );
  }
  
  const rootElement = document.getElementById("root");
  ReactDOM.render(&lt;App /&gt;, rootElement);
  </code></pre>
  
  <p>I'm a new in React and I'll be thankful if you can help me on this issue.</p>