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: TypeError: Cannot read properties of null (reading 'useState')

Here is a simplified version of my code:

import { useState } from 'react'

export default function Home() {
    return (
        <div>
            <Transactions />
        </div>
    )
}



const Transactions = () => {

    const [state, setState] = useState('test')
...
}

React/Next versions I'm running:

"next": "12.1.5",
"react": "18.0.0",
"react-dom": "18.0.0"

Screenshot of error from chrome dev tools:

Any thoughts on what's causing this? Thanks

EDIT Very dumb bug on my end, issue was resolved by importing react...