chore: udpate react, downshift and routing

packages/admin-ui/src/App.jsx

@@ -1,7 +1,7 @@
 import CssBaseline from '@mui/material/CssBaseline'
 import { ThemeProvider, StyledEngineProvider } from '@mui/material/styles'
 import React, { useState } from 'react'
-import { BrowserRouter as Router } from 'react-router-dom'
+import { Router } from 'wouter'
 import ApolloProvider from './utils/apollo'
 
 import AppContext from './AppContext'
@@ -9,10 +9,12 @@ import theme from './styling/theme'
 
 import Main from './Main'
 import './styling/global/global.css'
+import useLocationWithConfirmation from './routing/useLocationWithConfirmation.js'
 
 const App = () => {
   const [wizardTested, setWizardTested] = useState(false)
   const [userData, setUserData] = useState(null)
+  const [isDirtyForm, setDirtyForm] = useState(false)
 
   const setRole = role => {
     if (userData && role && userData.role !== role) {
@@ -22,8 +24,16 @@ const App = () => {
 
   return (
     <AppContext.Provider
-      value={{ wizardTested, setWizardTested, userData, setUserData, setRole }}>
-      <Router>
+      value={{
+        wizardTested,
+        setWizardTested,
+        userData,
+        setUserData,
+        setRole,
+        isDirtyForm,
+        setDirtyForm,
+      }}>
+      <Router hook={useLocationWithConfirmation}>
         <ApolloProvider>
           <StyledEngineProvider enableCssLayer>
             <ThemeProvider theme={theme}>