I'm trying to get type for queries/mutations returned from trpc use hooks, but they are different

import { AppRouter } from "../router"
import { TRPCClientErrorLike } from "@trpc/client"
import { UseTRPCQueryResult } from "@trpc/react-query/shared"
import { inferRouterOutputs } from "@trpc/server"

export type TRPCClientError = TRPCClientErrorLike<AppRouter>

export type TRPCUseQueryResult<TData> = UseTRPCQueryResult<
    TData,
    TRPCClientError
>

export type RouterOutput = inferRouterOutputs<AppRouter>

interface UserContext {
    user: TRPCUseQueryResult<RouterOutput["public"]["user"]["me"]>
}

const UserContext = createContext<UserContext | null>(null)

export const UserProvider = ({ children }: { children: React.ReactNode }) => {
    const user = trpc.public.user.me.useQuery()

    return (
        <UserContext.Provider value={{ user }}>
            {children}
        </UserContext.Provider>
    )
}

import { AppRouter, RouterOutput } from "..."
import { TRPCClientErrorLike } from "@trpc/client"
import { UseQueryResult } from "@tanstack/react-query"

export { useTRPC, type RouterOutput }
export type TRPCClientError = TRPCClientErrorLike<AppRouter>
export type TRPCUseQueryResult<T> = UseQueryResult<T, TRPCClientError>

interface UserContext {
    user: TRPCUseQueryResult<RouterOutput["public"]["user"]["me"]>
}

export const UserProvider = ({ children }: { children: React.ReactNode }) => {
    const trpc = useTRPC()
    const user = useQuery(trpc.public.user.me.queryOptions())

    return (
        <UserContext.Provider value={{ user }}>
            {children}
        </UserContext.Provider>
    )
}