Handle React error boundary

  const [queryClient] = useState(
    () =>
      new QueryClient({
        defaultOptions: {
          queries: {
            refetchOnWindowFocus: false,
            staleTime: 5 * 1000, // seconds
            useErrorBoundary: true,
            retry: false,
          },
        },
        queryCache: new QueryCache({
          onError: (error) => {
            // @ts-ignore
            if (error?.data?.httpStatus === 401) window.reload()
          },
        }),
      }),
  )

const BranchForm: React.FunctionComponent<Props> = ({}: Props) => {
  const [activeTab] = useContext(FormTabContext)
  const options = {
    enabled: activeTab === LOCATION_VIEW_TABS.branch,
    staleTime: STALE_FOR_5_MIN,
  }

  throw new Error('test')
  const { data: odGroups } = trpc.organizationHierarchy.odGroups.useQuery(
    undefined,
    options,
  )
  const { data: sdGroups } = trpc.organizationHierarchy.sdGroups.useQuery(
    undefined,
    options,
  )
    ...
}

export default withTlsErrorBoundary(BranchForm)