Getting error with form: Cannot update a component while rendering a different component

[anluik]

Hello! I’m having this issue in a project I’m working on and I’m hoping someone can help me out.
Project uses React+shadcn+react-query. I have form with two fields.

export default function MyComponent() {
    const form = useForm<z.infer<typeof formSchema>>({...});
    ...
    return (
        <Form {...form}>
            <form onSubmit={...)}>
                <FieldOne />
                <FieldTwo />
                <Button type="submit">Submit</Button>
            </form>
        </Form>
    );
}

Field two depends on field one - if field one changes, a http request is made inside field two that is enabled only when fieldOne has a value:

export const FieldTwo = () => {
    const form = useFormContext();
    const watchFieldOne = form.watch("fieldOne");
    const query = useGetSomethingBasedOnFieldOne(watchFieldOne);

    useEffect(() => {
        if (query.data) {
            form.setValue("fieldOne", query.data.someValue);
        }
    }, [form, query.data]);

    return (
        <FormField
           control={form.control}
           name="fieldTwo"
           ...
        />
    );
}

The very first time fieldOne changes, I get a console warning:

Warning: Cannot update a component (`MyComponent`) while rendering a different component (`Controller`). To locate the bad setState() call inside `Controller`, follow the ...

The form works, but this warning really bothers me. At first I had all code in one component and it worked, now I refactored and get an error.
I tried replicating the issue with just react-hook-form (sandbox), but I couldn't replicate console warning.
What could I do better here? TYIA