[Solved!] TypeError: React.createContext is not a function (not using server components)

TypeError: React.createContext is not a function
  at file:///home/node_modules/@tanstack/react-query/build/modern/QueryClientProvider.js:5:32
  at ModuleJob.run
  at async Promise.all (index 0)
  at async importModuleDynamicallyWrapper

TypeError: React.createContext is not a function
  at file:///home/node_modules/@tanstack/react-query/build/modern/QueryClientProvider.js:5:32
  at ModuleJob.run
  at async Promise.all (index 0)
  at async importModuleDynamicallyWrapper

import { QueryClientProvider } from '@/providers'

function App() {
  return (
    <QueryClientProvider>
      <OurApp />
    </QueryClientProvider>
  )
}

import { QueryClientProvider } from '@/providers'

function App() {
  return (
    <QueryClientProvider>
      <OurApp />
    </QueryClientProvider>
  )
}

import { QueryClientProvider as Provider, QueryClient } from '@tanstack/react-query'
import { ReactQueryDevTools } from '@tanstack/react-query-devtools'

export function QueryClientProvider({ children }: { children: React.ReactNode }) {
 const [queryClient] = useState(() => new QueryClient())
  return (
    <Provider client={queryClient}>
      {children}
      <ReactQueryDevtools initialIsOpen={false} />
    </Provider>
  )
}

import { QueryClientProvider as Provider, QueryClient } from '@tanstack/react-query'
import { ReactQueryDevTools } from '@tanstack/react-query-devtools'

export function QueryClientProvider({ children }: { children: React.ReactNode }) {
 const [queryClient] = useState(() => new QueryClient())
  return (
    <Provider client={queryClient}>
      {children}
      <ReactQueryDevtools initialIsOpen={false} />
    </Provider>
  )
}