Is there any way to transform query data and map according to that type in react-query v4?

I am trying to transform query data from API response. More specifically I want to add two additional property. That is why I use select configuration in useQuery hook like this:

But in this case I didn't get suggestion for extra two properties. That's why I've add another model and use it with useQuery hook like this:

But it troughing error.

I am stucked with this.

edit on codesandbox

Try this, the probblem is that the first generic type parameter of useQuery is not the returned data type. It's the queryFn return type. You can put the ModifiedProduct[] to the third generic type parameter or that the code infer itself.

  const { data, isLoading } = useQuery({
    queryKey: ["fetch-products"],
    queryFn: fetchProducts,
    select: (data) => {
      const items = data.map(
        (prod): ModifiedProduct => ({
          ...prod,
          dateOfAdd: new Date(),
          dateOfUpdate: new Date()
        })
      );
      return items;
    }
  });

// this should also work
  const { data, isLoading } = useQuery<Product[], unknown, ModifiedProduct[]>({
    queryKey: ["fetch-products"],
    queryFn: fetchProducts,
    select: (data) => {
      const items = data.map(
        (prod): ModifiedProduct => ({
          ...prod,
          dateOfAdd: new Date(),
          dateOfUpdate: new Date()
        })
      );
      return items;
    }
  });