title: What is causing "TypeError: Object(...) is not a function" while trying to use Vanilla Tilt with React?
body: <p>I am trying to use Vanilla Tilt in my React app with the following example:
  <a href="https://codesandbox.io/s/vanilla-tilt-with-react-n5ptm" rel="nofollow noreferrer">https://codesandbox.io/s/vanilla-tilt-with-react-n5ptm</a></p>
  <p>My code looks like this:</p>
  <pre><code>import React, { Component, useEffect, useRef } from &quot;react&quot;;
  import ReactDOM from 'react-dom';
  import Heading from &quot;../../_styled/Heading&quot;;
  import Paragraph from &quot;../../_styled/Paragraph&quot;;
  import { Content } from &quot;../../_styled/Content&quot;;
  import MouseScroll from &quot;../../_static/MouseScroll&quot;;
  import PlaceHolder from &quot;../../_static/PlaceHolder&quot;;
  import VanillaTilt from 'vanilla-tilt';
  
  function Tilt(props) {
    const { options, ...rest } = props;
    const tilt = useRef(null);
  
    useEffect(() =&gt; {
      VanillaTilt.init(tilt.current, options);
    }, [options]);
  
    return &lt;div ref={tilt} {...rest} /&gt;;
  }
  
  const options = {
      scale: 1.2,
      speed: 1000,
      max: 30
    };
  
  
  export default class CaseStudies extends Component {
    render() {
      const { showMouseIcon } = this.props;
  
      return (
        &lt;Content&gt;
          &lt;PlaceHolder sideMenuOpen={this.props.sideMenuOpen}/&gt;
          &lt;div className=&quot;container casestudiesheight&quot;&gt;
            &lt;div className=&quot;row casestudiesheight&quot;&gt;
              &lt;div className=&quot;case-studies-container&quot;&gt;
                &lt;Heading className=&quot;careers_ku&quot;&gt;Case Studies&lt;/Heading&gt;
                &lt;div className=&quot;case-card-container&quot;&gt;
                  &lt;Tilt className=&quot;case-card&quot;&gt;Lorem ipsum
                    &lt;/Tilt&gt;
                  &lt;div className=&quot;case-card&quot;&gt;a&lt;/div&gt;
                  &lt;div className=&quot;case-card&quot;&gt;&lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              {showMouseIcon &amp;&amp; &lt;MouseScroll /&gt;}
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/Content&gt;
      );
    }
  }
  </code></pre>
  <p>Version numbers:</p>
  <pre><code>    {
    &quot;name&quot;: &quot;app&quot;,
    &quot;version&quot;: &quot;0.1.0&quot;,
    &quot;private&quot;: true,
    &quot;dependencies&quot;: {
      &quot;@material-ui/core&quot;: &quot;^3.9.4&quot;,
      &quot;@material-ui/icons&quot;: &quot;^3.0.1&quot;,
      &quot;axios&quot;: &quot;^0.18.1&quot;,
      &quot;classnames&quot;: &quot;^2.2.6&quot;,
      &quot;emotion&quot;: &quot;^9.1.3&quot;,
      &quot;jquery&quot;: &quot;^3.5.1&quot;,
      &quot;moment&quot;: &quot;^2.22.2&quot;,
      &quot;normalize.css&quot;: &quot;^8.0.0&quot;,
      &quot;react&quot;: &quot;^17.0.1&quot;,
      &quot;react-cookie-consent&quot;: &quot;^2.2.2&quot;,
      &quot;react-custom-scrollbars&quot;: &quot;^4.2.1&quot;,
      &quot;react-date-picker&quot;: &quot;^7.0.0&quot;,
      &quot;react-datepicker&quot;: &quot;^1.7.0&quot;,
      &quot;react-dom&quot;: &quot;^17.0.1&quot;,
      &quot;react-fullpage&quot;: &quot;^0.1.19&quot;,
      &quot;react-ga&quot;: &quot;^2.5.7&quot;,
      &quot;react-helmet&quot;: &quot;^6.1.0&quot;,
      &quot;react-icons&quot;: &quot;^3.5.0&quot;,
      &quot;react-meta-tags&quot;: &quot;^0.7.4&quot;,
      &quot;react-picky&quot;: &quot;^4.0.1&quot;,
      &quot;react-player&quot;: &quot;^1.6.6&quot;,
      &quot;react-protected-mailto&quot;: &quot;^1.0.3&quot;,
      &quot;react-responsive&quot;: &quot;^6.0.0&quot;,
      &quot;react-responsive-carousel&quot;: &quot;^3.1.43&quot;,
      &quot;react-scripts&quot;: &quot;1.1.4&quot;,
      &quot;react-select&quot;: &quot;^2.1.1&quot;,
      &quot;react-select-checked&quot;: &quot;^0.1.10&quot;,
      &quot;react-sidebar&quot;: &quot;^3.0.2&quot;,
      &quot;react-slideshow-image&quot;: &quot;^1.0.8&quot;,
      &quot;react-toastify&quot;: &quot;^4.5.2&quot;,
      &quot;react-vanilla-tilt&quot;: &quot;^1.0.0&quot;,
      &quot;vanilla-tilt&quot;: &quot;^1.7.0&quot;
    },
  </code></pre>
  <p><a href="https://i.stack.imgur.com/6CPAW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6CPAW.png" alt="react error" /></a></p>
  <p>Error message:</p>
  <pre><code>TypeError: Object(...) is not a function
  Tilt
  C:/01_Projects/src/components/_pages/CaseStudies/CaseStudies.js:15
    12 | 
    13 | function Tilt(props) {
    14 |   const { options, ...rest } = props;
  &gt; 15 |   const tilt = useRef(null);
    16 | 
    17 |   useEffect(() =&gt; {
    18 |     VanillaTilt.init(tilt.current, options);
  View compiled
  ▶ 18 stack frames were collapsed.
  ./src/index.js
  C:/01_Projects/src/index.js:48
    45 | const target = document.querySelector(&quot;#root&quot;);
    46 | 
    47 | 
  &gt; 48 | render(
    49 |   &lt;Router&gt;
    50 |     &lt;React.Fragment&gt;
    51 |       &lt;Switch&gt;
  </code></pre>
  <p>I can't find a solution to make VanillaTilt work in my app, and would be happy if someone could point out what am I doing wrong.</p>