I am working on a Next.js project where I am using TRPC and React Query for data fetching. However, I am encountering a TypeError: useContext is not a function error. Here is my setup:

TRPC Client Setup
src/utils/trpc.ts

.

TRPC Router
src/server/router.ts

.

App Component
src/pages/_app.tsx

.

Home Component
src/pages/index.tsx

.

here i am getting error

error message : TypeError: react__WEBPACK_IMPORTED_MODULE_2__.useContext is not a function
    at Home (./src/pages/index.tsx:11:68)
    at stringify (<anonymous>)

What I Have Tried ->

Ensured that React Query is properly set up and wrapped in QueryClientProvider.
Tried using TRPC without React Query, but encountered issues with createTRPCClient.

Question ->

How can I resolve the TypeError: useContext is not a function error when using TRPC with React Query in a Next.js project? Is there an alternative approach to achieve the same functionality without encountering this issue?