I can't get the simplest client side component to work in my brand new NextJs project. I have a very simple project structure:

└───app
    │   favicon.ico
    │   globals.css
    │   layout.tsx
    │   page.module.css
    │   page.tsx
    │
    └───components
            counter.tsx

// page.tsx
import Counter from "@/app/components/counter";

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

// components/counter.tsx
'use client'

import { useState } from 'react'

export default function Counter() {
    const [count, setCount] = useState(0)

    return (
        <div>
            <p>You clicked {count} times</p>
            <button onClick={() => setCount(count + 1)}>Click me</button>
        </div>
    )
}

I am able to see the text and button and click on it...but count doesn't change, no errors in either the browser console or the terminal. Pretty sure I am being very dumb, but I am so confused haha. Any help is appreciated!