How to handle TRPC error with tanstack/query in components

    getRooms: publicProcedure.query(() => {
        throw new TRPCError({ code: "BAD_REQUEST", message: "Not implemented" });
    }),

function MainComponent() {
    const trpcRooms = trpc.getRooms.useQuery();

    useEffect(() => {
        if (trpcRooms.isError) {
            // do something with the error
            console.log(trpcRooms.error);
        }
    }, [trpcRooms.isError, trpcRooms.isLoading]);

export const TRPCWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => {
    const url = new URL(window.location.href);
    const host = url.hostname;

    const [queryClient] = useState(
        () =>
            new QueryClient({
                defaultOptions: {
                    queries: {
                        useErrorBoundary: true,
                    },
                    mutations: {
                        useErrorBoundary: true,
                    },
                },
            }),
    );
    const [trpcClient] = useState(() =>
        trpc.createClient({
            transformer: superjson,
            links: [
                loggerLink({
                    enabled: (opts) => (process.env.NODE_ENV === "development" && typeof window !== undefined) || (opts.direction === "down" && opts.result instanceof Error)
                }),
                httpBatchLink({
                    url: `http://${host}:${config.webClient.port}/trpc`,
                }),
            ],
        }),
    );
    return (
        <trpc.Provider client={trpcClient} queryClient={queryClient}>
            <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
        </trpc.Provider>
    );
};