Is it ok to use initialData with previousData?

[moroshko]

I created a custom hook that has both initialData and placeholderData:

export const useFruits = (query: string) => {
  return useQuery<SuccessResponse>({
    queryKey: ["fruits", query],
    queryFn: async () => {
      await new Promise((resolve) => setTimeout(resolve, 2000)); // emulate network latency

      return {
        fruits: fruits.filter((fruit) =>
          fruit.toLowerCase().startsWith(query.toLowerCase())
        ),
        query,
      };
    },
    initialData: {
      fruits: ["Banana", "Blackberry"],
      query,
    },
    placeholderData: keepPreviousData,
  });
};

I added initialData because I fetch the data in a Server Component in Next.js app and it's available to populate the cache on the client. Also, I like how TypeScript understands that data will always exist:

const Fruits = () => {
  const [query, setQuery] = useState("b");
  const fruitsInfo = useFruits(query); // fruitsInfo.data will never be undefined
  const { fruits, query: highlightQuery } = fruitsInfo.data;

  console.log({
    isFetching: fruitsInfo.isFetching,
    fruits,
    highlightQuery
  });

  // Render matched fruits here and highlight the text matching `highlightQuery`
};

I also added placeholderData: keepPreviousData because I'd like to show the user the previous data while the new data is being fetched.

However, when I change the query from "b" to "bb", I see:

{
  "isFetching": true,
  "fruits": [
    "Banana",
    "Blackberry"
  ],
  "highlightQuery": "bb"   // why not still "b" here?
}
{
  "isFetching": false,
  "fruits": [],
  "highlightQuery": "bb"    // only here I expect it to be "bb"
}

Why ishighlightQuery updated before we get the result?

Is it ok to use initialData with previousData in the same useQuery?

This article by @TkDodo implies that we should use one or the other 🤔

Here is a CodeSandbox that demonstrates the actual "real-life" issue.
Initially, "b" is highlighted. When I update the query to "bb" you can see that the highlight disappears (because highlightQuery is updated before we get the result).
What's the best way to fix this?