title: Chakra UI Setup with Next.js Throwing Error
body: <p>I'm looking to get Chakra UI set up (latest V1) with a simple Next.js app. Having followed the 'getting started' steps at <a href="https://chakra-ui.com/docs/getting-started" rel="nofollow noreferrer">https://chakra-ui.com/docs/getting-started</a> I'm running into the following error when running dev server:</p>
  <pre><code>error - ./node_modules/@chakra-ui/portal/dist/esm/portal.js
  Attempted import error: 'useCallbackRef' is not exported from '@chakra-ui/hooks'.
  </code></pre>
  <p>Here's my <code>_app.js</code> file:</p>
  <pre class="lang-js prettyprint-override"><code>import { ChakraProvider } from &quot;@chakra-ui/react&quot;;
  
  
  function MyApp({ Component, pageProps }) {
    return (
      &lt;ChakraProvider&gt;
        &lt;Component {...pageProps} /&gt;
      &lt;/ChakraProvider&gt;
    );  
  }
  
  export default MyApp
  </code></pre>
  <p><code>package.json</code>:</p>
  <pre class="lang-json prettyprint-override"><code>{
    &quot;name&quot;: &quot;test&quot;,
    &quot;version&quot;: &quot;0.1.0&quot;,
    &quot;private&quot;: true,
    &quot;scripts&quot;: {
      &quot;dev&quot;: &quot;next dev&quot;,
      &quot;build&quot;: &quot;next build&quot;,
      &quot;start&quot;: &quot;next start&quot;
    },
    &quot;dependencies&quot;: {
      &quot;@chakra-ui/react&quot;: &quot;^1.1.3&quot;,
      &quot;@emotion/react&quot;: &quot;^11.1.4&quot;,
      &quot;@emotion/styled&quot;: &quot;^11.0.0&quot;,
      &quot;framer-motion&quot;: &quot;^3.2.0&quot;,
      &quot;next&quot;: &quot;10.0.5&quot;,
      &quot;react&quot;: &quot;17.0.1&quot;,
      &quot;react-dom&quot;: &quot;17.0.1&quot;
    }
  }
  </code></pre>
  <p>I've had a rummage through the prescribed <code>portal.js</code> node module, but there doesn't look to be anything untoward.</p>
  <p>Any help would be greatly appreciated, thanks for your time in advance.</p>