title: getting error "TypeError: Cannot read properties of null (reading 'useState')" on useState usage react
body: <p>So I'm trying to use useState in my nextjs app, but as soon as I add in the line of code to initialize useState it throws a popup error with the error message: <code>TypeError: Cannot read properties of null (reading 'useState')</code></p>
  <p>Here is a simplified version of my code:</p>
  <pre><code>import { useState } from 'react'
  
  export default function Home() {
      return (
          &lt;div&gt;
              &lt;Transactions /&gt;
          &lt;/div&gt;
      )
  }
  
  
  
  const Transactions = () =&gt; {
  
      const [state, setState] = useState('test')
  ...
  }
  </code></pre>
  <p>React/Next versions I'm running:</p>
  <pre><code>&quot;next&quot;: &quot;12.1.5&quot;,
  &quot;react&quot;: &quot;18.0.0&quot;,
  &quot;react-dom&quot;: &quot;18.0.0&quot;
  </code></pre>
  <p>Screenshot of error from chrome dev tools:
  <a href="https://i.stack.imgur.com/6EPCW.png" rel="noreferrer"><img src="https://i.stack.imgur.com/6EPCW.png" alt="Screenshot of error from chrome dev tools" /></a></p>
  <p>Any thoughts on what's causing this? Thanks</p>
  <p><em><strong>EDIT</strong></em>
  Very dumb bug on my end, issue was resolved by importing react...</p>