add types for data fetching function return type: if you know the structure of the response, you can just type it manually in that function, that way you can get the type safety.

const getProducts = async():Promise<Products[]> => { }

Note: if you hover over data, you see a red squiggly line, and it says that data is possibly undefined, and this is the default behaviour of the useQuery hook. If you're working with a typescript, this can be annoying sometimes, because anytime you try to access the properties of the return object or array, you may get time errors.