Layout component fix

src/layout/Layout.tsx

-import { Reducer, useCallback, useMemo, useReducer, useRef } from "react";
+import React, { Reducer, useCallback, useMemo, useReducer, useRef } from "react";
 
 import { HeaderProps } from "../components/header/Header";
-import React from "react";
 import { observer } from "mobx-react-lite";
 import { styles } from "./Layout.styles";
 
@@ -70,23 +69,22 @@ export const Layout: React.FunctionComponent<LayoutProps> = observer(props => {
 		if (props.layoutOptions) optionsSource.push(props.layoutOptions);
 
 		if (routeKeyRef.current === props.routeKey) optionsSource.push(options);
-		else routeKeyRef.current = props.routeKey;
+		else {
+			dispatchOptions({ type: "reset" });
+			routeKeyRef.current = props.routeKey;
+		}
 
 		return mergeLayoutOptions(...optionsSource);
 	}, [options, props.layoutOptions, props.routeKey]);
 	const mergedOptionsRef = useRef<RecursivePartial<LayoutOptions>>(mergedOptions);
-	React.useEffect(() => {
-		mergedOptionsRef.current = mergedOptions;
-	}, []);
+	mergedOptionsRef.current = mergedOptions;
 
-	const setLayoutOptions = useCallback<SetLayoutOptions>(
-		newOptions =>
-			dispatchOptions({
-				type: "update",
-				newOptions: typeof newOptions === "function" ? newOptions(mergedOptionsRef.current) : newOptions,
-			}),
-		[]
-	);
+	const setLayoutOptions = useCallback<SetLayoutOptions>(newOptions => {
+		dispatchOptions({
+			type: "update",
+			newOptions: typeof newOptions === "function" ? newOptions(mergedOptionsRef.current) : newOptions,
+		});
+	}, []);
 
 	return (
 		<LayoutContext.Provider value={setLayoutOptions}>