I'm trying to use the useOptimistic hook in my Next.js page, and I've added the "use client" directive at the top of my file as suggested by the error message. However, I'm still encountering the error:
TypeError: useOptimistic only works in Client Components. Add the "use client" directive at the top of the file to use it.

Here's a snippet of my code:

'use client'

import { useOptimistic } from 'react'
import { send } from './actions'

type Message = {
message: string
}

export function Thread({ messages }: { messages: Message[] }) {
const [optimisticMessages, addOptimisticMessage] = useOptimistic<Message[]>(
messages,
(state: Message[], newMessage: string) => [
...state,
{ message: newMessage },
]
)

return (
<div>
{optimisticMessages.map((m, k) => (
<div key={k}>{m.message}</div>
))}
<form
action={async (formData: FormData) => {
const message = formData.get('message')
addOptimisticMessage(message)
await send(message)
}}
>
<input type="text" name="message" />
<button type="submit">Send</button>
</form>
</div>
)
}


"next": "^13.5.4"

I've read the documentation on Next.js, but I'm still facing this issue. Any insights on how to resolve this error would be greatly appreciated. Thanks!