Using QueryClientProvider in next js shows a warning in browser

[Sakkhor909]

Hello, I am new to react query.
I am using next js and setup my _app.js file like this

import React from "react";
import { QueryClient, QueryClientProvider } from "react-query";

function MyApp({ Component, pageProps }) {
  const [queryClient] = React.useState(() => new QueryClient());

  return (
      <QueryClientProvider client={queryClient}>
        <Component {...pageProps} />
      </QueryClientProvider>
  );
}

export default MyApp;

But my browser shows a warning

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Check the render method of `ForwardRef`.
    at Image (webpack-internal:///./node_modules/next/dist/client/image.js:87:22)
    at eval (webpack-internal:///./node_modules/next/dist/client/link.js:133:33)
    at header
    at Header
    at Home (webpack-internal:///./pages/index.js:65:85)
    at QueryClientProvider (webpack-internal:///./node_modules/react-query/es/react/QueryClientProvider.js:39:21)
    at MyApp (webpack-internal:///./pages/_app.js:92:27)
    at ErrorBoundary (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/client.js:8:20746)
    at ReactDevOverlay (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/client.js:8:23395)
    at Container (webpack-internal:///./node_modules/next/dist/client/index.js:323:9)
    at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:825:26)
    at Root (webpack-internal:///./node_modules/next/dist/client/index.js:949:27)
window.console.error @ next-dev.js?3515:25

How do I fix this error?

[TkDodo]

This doesn't look like it has something to do with react-query, but rather with a component called Header you have somewhere in your component tree ...