Best practice to set query data before a possible mutation

[lukasbash]

My use case requires the data of multiple models to be available inside a modal UI view. Basically it is a root component that maps the array data into several sub components. Each component uses useQuery and an ID which is passed via props to identify its relevant data set from the array. Note that this data might be empty or present initially - a classic update-or-create scenario.

Now the part where I am unsure about.
Basically, as the user finds himself inside a modal view, the data he modifies might be discarded if he does not press some kind of submit button.
Right now the mapped components provide some kind of UI inputs which modify the data by calling queryClient.setQueryData... in their event handlers. As soon as the user submits the view I want to use useMutation.

Is this an understandable, valid approach? The code feels readable and makes sense, but I've read a lot of the docs and it does not sound like it's the perfect approach. Suggestions or feedback on this?

Maybe some other fact I needed to achieve this: Stale time has been set to a very low value (i.e. 500ms) to avoid the waterfall rendering requests. Is this also fine?