I get the following error

 ⨯ TypeError: (0 , swr__WEBPACK_IMPORTED_MODULE_4__.default) is not a function

This is my page

async function ChatPage(context: any) {
    const { userId } = context.params!;
    const { initialMessages } = await getInitialMessages(userId);

    const { data: messages, mutate } = useSWR<Message[] | any>(`URL`, fetcher, {
        fallbackData: initialMessages,
        refreshInterval: 5000, // Polling every 5 seconds
    });

    const handleSendMessage = async (content: string) => {
        const response = await fetch(`URL`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ userId, content }),
        });

        const newMessage = await response.json();
        mutate();
    };

    return (
        <>
            <div className="flex-1">
                <ChatWindow
                    loadedMessages={messages}
                />
            </div>
            <ChatInput onSubmit={handleSendMessage} />
        </>
    );
}

Its a server component. <ChatWindow /> is also server component and <ChatInput /> is a client component.
Essentially I want the page to query my DB for messages, and pass them to chatWindow, then poll every 5 seconds for new messages.

I dont know what the best approach is.