added yup localisation

src/App.tsx

@@ -24,6 +24,7 @@ import SettingsRoute from "~/routes/SettingsRoute"
 import SignupRoute from "~/routes/SignupRoute"
 import VerifyEmailRoute from "~/routes/VerifyEmailRoute"
 
+import I18nHandler from "./I18nHandler"
 import "./init-i18n"
 
 const router = createBrowserRouter([
@@ -111,6 +112,7 @@ export default function App(): ReactElement {
 					<SnackbarProvider>
 						<CssBaseline />
 						<RouterProvider router={router} />
+						<I18nHandler />
 					</SnackbarProvider>
 				</ThemeProvider>
 			</QueryClientProvider>

src/I18nHandler.tsx

@@ -0,0 +1,27 @@
+import * as yup from "yup"
+import {useTranslation} from "react-i18next"
+import {useEffect} from "react"
+import {de} from "yup-locales"
+import en from "yup/es/locale"
+
+const YUP_LOCALE_LANGUAGE_MAP: Record<string, unknown> = {
+	"en-US": en,
+	"de-DE": de,
+}
+
+export default function I18nHandler(): null {
+	const {i18n} = useTranslation()
+
+	useEffect(() => {
+		i18n.on("languageChanged", newLanguage => {
+			// Update yup locale
+			const yupLocale = YUP_LOCALE_LANGUAGE_MAP[newLanguage]
+
+			if (yupLocale) {
+				yup.setLocale(yupLocale)
+			}
+		})
+	}, [i18n])
+
+	return null
+}

src/init-i18n.ts

@@ -1,6 +1,4 @@
 import {initReactI18next} from "react-i18next"
-import {de} from "yup-locales"
-import {setLocale} from "yup"
 // @ts-ignore
 // eslint-disable-next-line ordered-imports/ordered-imports
 import Cache from "i18next-localstorage-cache"
@@ -25,5 +23,3 @@ i18n.use(HttpApi)
 			escapeValue: false, // react already safes from xss => https://www.i18next.com/translation-function/interpolation#unescape
 		},
 	})
-
-setLocale(de)