useFilePicker doesn't work with useQuery

[NathZ1]

Hi there, I have been using your file picker react hook but have run into a problem - It doesn't seem to work when useQuery is also used. I am using useQuery to pull data into a different form component that the file picker is in, and when the button is clicked and a file(s) is selected, nothing is being returned. If I remove the useQuery code the file picker successfully returns the file(s) as expected.

Is there something I am doing wrong, or if it is a bug is it above to be fixed by chance?

Kind regards, nathan

import { useFilePicker } from "react-sage"
import { Button } from "components/layout/Button"
import { msgraphclient } from "components/msgraph";
import { useQuery } from "react-query";

export default function Main() {

  //the useQuery hook stops the file-picker hook from working... why?
  const queryLocation = `sites/xxxxxxxxxxxx:/lists/xxxxxxxxxxxx/items?expand=fields(select%3Dgroup)`; 
  const { data } = useQuery(queryLocation, async () => {
    return await msgraphclient
      .api(queryLocation)
      .get()
  });
  console.log(data)

  //when useQuery is used, the file-picker LOOKS like it works, but when you select a file(s) and press ok, no file(s) are returned...
  //commenting out the useQuery above and file-picker works again...
  const { files, onClick, HiddenFileInput } = useFilePicker()
  console.log(files)

  return (
    <div>
      {files?.map((file: any) => <div key={file.name}>{file.name}</div>)}
      <Button
        type={"button"}
        onClick={onClick}
      >
        Click me
      </Button>
      <HiddenFileInput/>
    </div>
  )
}