title: Hook problems when using @fluentui/react
body: <p>I'm trying to use the Link component in @fluentui/react, but I get an error about invalid hook calls.  I tried using Link in office-ui-fabric-react, but got same hook error.</p>
  <p><strong>Background:</strong></p>
  <p>Component A calls the code with the Link component.</p>
  <p>Component A is in a different folder than Link component.</p>
  <p><strong>Error:</strong>
  &quot;react-dom.development.js:3198 Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:</p>
  <ol>
  <li>You might have mismatching versions of React and the renderer (such as React DOM)</li>
  <li>You might be breaking the Rules of Hooks</li>
  <li>You might have more than one copy of React in the same app&quot;</li>
  </ol>
  <p><strong>Link code:</strong></p>
  <pre><code>import * as React from &quot;react&quot;;
  import { Link } from &quot;@fluentui/react&quot;;
  //import { Link } from &quot;office-ui-fabric-react&quot;;
  
  export interface ITestProps {
    what: string;
    click: () =&gt; void;
  }
  
  export default class TestComponent extends React.PureComponent&lt;ITestProps, {}&gt; {
    constructor(props: ITestProps) {
      super(props);
    }
  
    render() {
      return (
        &lt;div&gt;
          Test {this.props.what}
          &lt;button onClick={this.props.click}&gt;Click&lt;/button&gt;
          &lt;Link onClick={this.props.click}&gt;Click link&lt;/Link&gt; &lt;-- this is what is causing hook problems
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  <p>Then I tried using a functional component rather than extending from React.PureComponent, but same hook error:</p>
  <pre><code>export default function TestComponent(props: ITestProps) {
    return (
      &lt;div&gt;
        Test2 {props.what}
        &lt;button onClick={props.click}&gt;Click&lt;/button&gt;
        &lt;Link onClick={props.click}&gt;Click link&lt;/Link&gt; &lt;-- also produces hook error
      &lt;/div&gt;
    );
  }
  
  
  </code></pre>
  <p>The <em><strong>only</strong></em> way that I solved this problem is my Link code inside the <em><strong>same</strong></em> folder as the Component that uses the Link code.</p>
  <p>I want to be able to put my Link code in a <em>separate</em> folder, <em><strong>not</strong></em> in the same folder as Component A.</p>
  <p>I also made sure that the react and react-dom version of <em>both</em> folders are the same, but I still got hook errors.</p>
  <p><strong>Please any suggestions?</strong></p>