Как интегрировать React Router DOM с системой управления состоянием, например, Redux?

const initialState = { isAuthenticated: false };
const authReducer = (state = initialState, action) => {
	switch (action.type) {
		case 'LOGIN':
			return { ...state, isAuthenticated: true };
		case 'LOGOUT':
			return { ...state, isAuthenticated: false };
		default:
			return state;
	}
};

import { Provider } from 'react-redux';
import { createStore } from 'redux';
const store = createStore(authReducer);
const App = () => (
	<Provider store={store}>
		<MainRouter />
	</Provider>
);

import { useSelector } from 'react-redux';
import { Navigate } from 'react-router-dom';
const ProtectedRoute = ({ children }) => {
	const isAuthenticated = useSelector(state => state.isAuthenticated);
	return isAuthenticated ? children : <Navigate to="/login" />;
};

import { useDispatch } from 'react-redux';
import { useNavigate } from 'react-router-dom';
const LoginPage = () => {
	const dispatch = useDispatch();
	const navigate = useNavigate();
	const handleLogin = () => {
		dispatch({ type: 'LOGIN' });
		navigate('/dashboard');
	};
	return <button onClick={handleLogin}>Войти</button>;
};