I want to use a single Wrapper Component in a library im providing. The wrapper should provide stuff like Context and QueryClient. The component looks like this:

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

const client = new QueryClient();

function Wrapper(props) {
    return (
        <QueryClientProvider client={client}>
            {props.children}
        </QueryClientProvider>
    );
}

When wrapping children with the Wrapper useQuery throws an error that no QueryClientProvider is set. In this case App uses the useQuery Hook from react-query.

import { Wrapper } from "my-lib";

ReactDOM.render(
    <React.StrictMode>
        <Wrapper>
            <App />
        </Wrapper>
    </React.StrictMode>,
    document.getElementById("root")
);

At first i thought you need a QueryClientProvider directly above an useQuery hook. But for example in Storybook you can define one QueryClient for all stories together. Where did i went wrong?

Edit: App component:

import { useQuery } from "react-query";

export const App = () => {
    const data = useQuery("data", () =>
        fetch("https://jsonplaceholder.typicode.com/todos/1").then((res) =>
            res.json()
        )
    );
    if (data.isError || data.isLoading) return <>Error/Loading</>;
    return <>{data.data.title}</>;
};