Following documentation gives error: "You cannot dot into a client module from a server component."

import { trpcServer } from '@/trpc/server'
export const TestGreeting = async () => {
  const message = await trpcServer.test()
  if (!message) return <div>Loading...</div>
  return <div>{message}</div>
}

'use-client'

import { trpcClient } from '@/trpc/client'
export const TestGreeting = async () => {
  const message = trpcClient.test.useQuery()
  if (!message.data) return <div>Loading...</div>
  return <div>{message.data}</div>
}

Unhandled Runtime Error
Error: Cannot access test.useQuery on the server. You cannot dot into a client module from a server component. You can only pass the imported name through.

Source
src/app/home/TestGreeting.tsx (7:35) @ useQuery
   5 |
   6 | export const TestGreeting = async () => {
>  7 |   const message = trpcClient.test.useQuery()
     |                                   ^

Error: Cannot read properties of undefined (reading 'useQuery')