Next.JS: QueryBuilder is changing from an uncontrolled component to be controlled

[eknkc]

I've been trying to use controlled QueryBuilder on latest Next.JS but even this:

<QueryBuilder query={{ id: "none", combinator: "and", rules: [] }} />

comes up with error:

QueryBuilder is changing from an uncontrolled component to be controlled. This is likely caused by the query changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled query builder for the lifetime of the component. More info: https://reactjs.org/link/controlled-components

This also happens on the official example. Check out the console on sandbox:

https://codesandbox.io/p/devbox/github/react-querybuilder/react-querybuilder/tree/main/examples/next

It looks like the issue happens here:

As the prevQueryPresent is null even though the query prop is basically static and not undefined. I assume the useEffect call in usePrevious happens after this useEffect for some reason and even though there was a previous query, it thinks the query was undefined and then became defined.

[eknkc]

Here's basically what happens in debugger:

https://link.ekin.dev/lZWXZ1jN

Next for some reason triggers a new render before the latest one and usePrevious returns null in the second call even though the first one had a value that is not undefined. The usePrevious effect never ran before the second call to it.