Service layer with Tanstack and Contexte API

I have decided to use a service layer to manage my API/server calls in my React app. I'm using Tanstack Query (useQuery and useMutation) in my components and an API context. I aim to maintain maximum separation, especially between the service layer and the rest of the flow. Here is my current approach:

1 Creating a Specific Feature Context: I have a context (let's call it TanstackQueryContext).

2 Provider as a Data Provider: The provider focuses on one mission: sharing this context with components. Each component (TSX file) uses the useContext hook to get updates from the provider. Notice: TSX will not directly import Custom Hooks in this case

3 Inversion of Control: The Tanstack Query hooks import and use the service layer interface to manage API calls.

Is this approach Healthy and enough? Or may be it needs to be reviewed/coorect or replaced with a better one? Thank you in advance