fix: updates for packages breaking changes

src/components/Footer.jsx

@@ -1,11 +1,11 @@
 import { useState, useEffect } from 'react';
 import { Link } from 'react-router-dom';
-import { useErrorHandler } from 'react-error-boundary';
+import { useErrorBoundary } from 'react-error-boundary';
 import logo from '../assets/logo.svg';
 
 export default function Footer() {
   const [version, setVersion] = useState('0.0.0');
-  const handleError = useErrorHandler();
+  const handleError = useErrorBoundary();
 
   useEffect(() => {
     window.ugrc

src/pages/About.jsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import { useHistory } from 'react-router-dom';
-import { useErrorHandler } from 'react-error-boundary';
+import { useErrorBoundary } from 'react-error-boundary';
 import logo from '../assets/logo.svg';
 
 export default function About() {
@@ -12,7 +12,7 @@ export default function About() {
     repo: 'https://github.com/agrc/api-client',
   });
   const history = useHistory();
-  const handleError = useErrorHandler();
+  const handleError = useErrorBoundary();
 
   useEffect(() => {
     window.ugrc.getAppInfo().then(setInfo).catch(handleError);

src/pages/ApiKey.jsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import { HandThumbUpIcon, HandThumbDownIcon } from '@heroicons/react/24/outline';
-import { useErrorHandler } from 'react-error-boundary';
+import { useErrorBoundary } from 'react-error-boundary';
 import { useGeocodeContext } from '../components/GeocodeContext';
 import { Spinner } from '../components/PageElements';
 
@@ -10,7 +10,7 @@ export default function ApiKey() {
   const history = useHistory();
   const [keyStatus, setKeyStatus] = useState('unknown');
   const [inputValue, setInputValue] = useState('');
-  const handleError = useErrorHandler();
+  const handleError = useErrorBoundary();
 
   useEffect(() => {
     window.ugrc
@@ -90,7 +90,7 @@ export default function ApiKey() {
             API Key
           </label>
           <input
-            className="ml-4 h-12 max-w-lg flex-grow rounded-none rounded-l border-0 border-t border-b border-l text-2xl focus:ring-0"
+            className="ml-4 h-12 max-w-lg flex-grow rounded-none rounded-l border-0 border-b border-l border-t text-2xl focus:ring-0"
             type="text"
             id="apiKey"
             maxLength="19"
@@ -106,7 +106,7 @@ export default function ApiKey() {
             }}
             type="button"
             disabled={keyStatus === 'invalid'}
-            className="h-12 w-24 rounded-none rounded-r border-0 border-t border-b border-r"
+            className="h-12 w-24 rounded-none rounded-r border-0 border-b border-r border-t"
           >
             {keyStatus === 'validating' ? <Spinner /> : <>Next</>}
           </button>

src/pages/Data.jsx

@@ -2,7 +2,7 @@ import { useEffect, useRef, useState } from 'react';
 import { Link, useHistory } from 'react-router-dom';
 import { useDropzone } from 'react-dropzone';
 import { DocumentPlusIcon, DocumentMinusIcon } from '@heroicons/react/24/outline';
-import { useErrorHandler } from 'react-error-boundary';
+import { useErrorBoundary } from 'react-error-boundary';
 import DropzoneMessaging from '../components/DropzoneMessaging.jsx';
 import FieldLinker from '../components/FieldLinker.jsx';
 import { useGeocodeContext } from '../components/GeocodeContext.js';
@@ -124,7 +124,7 @@ export default function Data() {
     zone: [],
   });
   const history = useHistory();
-  const handleError = useErrorHandler();
+  const handleError = useErrorBoundary();
 
   useEffect(() => {
     window.addEventListener('keyup', (event) => {

src/pages/Geocoding.jsx

@@ -2,7 +2,7 @@ import { useState, useEffect, useRef, useCallback } from 'react';
 import { Link, Prompt } from 'react-router-dom';
 import humanizeDuration from 'humanize-duration';
 import { DocumentTextIcon } from '@heroicons/react/24/outline';
-import { useErrorHandler } from 'react-error-boundary';
+import { useErrorBoundary } from 'react-error-boundary';
 import { useGeocodeContext } from '../components/GeocodeContext.js';
 
 const numberFormat = new Intl.NumberFormat('en-US');
@@ -21,7 +21,7 @@ export default function Geocoding() {
     lastRequest: null,
     failures: 0,
   });
-  const handleError = useErrorHandler();
+  const handleError = useErrorBoundary();
 
   const onDragStart = (event) => {
     event.preventDefault();

src/pages/Routes.jsx

@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
 import { Link, withRouter, MemoryRouter as Router, Route, Switch } from 'react-router-dom';
 import { useNavigatorStatus } from 'react-navigator-status';
-import { ErrorBoundary, useErrorHandler } from 'react-error-boundary';
+import { ErrorBoundary, useErrorBoundary } from 'react-error-boundary';
 import GeocodeContextProvider from '../components/GeocodeContext.js';
 import { ApiKey, Data, Plan, About, Geocoding, Wkid, Offline, ErrorPage } from '.';
 import { Chrome, Header, Footer } from '../components/PageElements';
@@ -35,7 +35,7 @@ const pages = [
 
 export default function Routes() {
   const online = useNavigatorStatus();
-  const handleError = useErrorHandler();
+  const handleError = useErrorBoundary();
 
   useEffect(() => {
     window.addEventListener('keyup', (event) => {

src/pages/Wkid.jsx

@@ -2,13 +2,13 @@ import { useEffect, useState } from 'react';
 import { useHistory, Link } from 'react-router-dom';
 import { RadioGroup } from '@headlessui/react';
 import clsx from 'clsx';
-import { useErrorHandler } from 'react-error-boundary';
+import { useErrorBoundary } from 'react-error-boundary';
 
 export default function Wkid() {
   const [wkid, setWkid] = useState('');
   const [customWkid, setCustomWkid] = useState('');
   const history = useHistory();
-  const handleError = useErrorHandler();
+  const handleError = useErrorBoundary();
 
   useEffect(() => {
     window.ugrc