how to use errorboundary in react-query when error occurs

Question

I want to practice react-query and handling errors, so I used ErrorBoundary and intentionally occur errors and expect to show ErrorBoundary FallbackComponent, but it doesn't worked...

I tries to find how to trigger errors to ErrorBoundary, but everything doesn't worked

enter image description here

<Suspense>
      <ErrorBoundary FallbackComponent={SuspenseError}>
        <UserNameForm></UserNameForm>//error occurs
      </ErrorBoundary>
</Suspense>

UserNameForm.js

const UserNameForm = () => {
  const { data, isError, isLoading } = useQuery({
    queryKey: ["id"],
    queryFn: async () => {
      const userName = "invalid";
      const url = `https://kr.api.riotgames.com/lol/summoner/v4/summoners/by-name/${userName}?api_key=${process.env.REACT_APP_API}`;
      const res = await axios.get(url);
      return res.data;
    },
    suspense: true,
  });

  return <div>intentionally error occurs</div>;
};
export default UserNameForm;