Бесконечный l oop с React Router Switch Route Redirect

Question

Я пытаюсь, чтобы пользователь выбрал штат США из приведенной ниже формы, прежде чем станет доступной остальная часть приложения. Смотрите мой DataRoute. В DropDown я проверяю, когда selectedState хранится в хранилище резервов, а затем перенаправляю на другой экран, но я застреваю в бесконечном l oop. Я переключился на использование Switch и поиграл с exact, но ни один не исправил это. Спасибо за любую помощь!

Этот код ниже последовательно возвращает

Необработанный отказ (ошибка): превышена максимальная глубина обновления. Это может произойти, когда компонент повторно вызывает setState внутри componentWillUpdate или componentDidUpdate. React ограничивает количество вложенных обновлений для предотвращения бесконечных циклов.

import React from 'react';
import { connect } from 'react-redux';
import { withRouter, Redirect } from 'react-router-dom';
import {
  Container,
  CircularProgress,
  Button,
  FormControl,
  NativeSelect,
  Box,
  InputLabel
} from '@material-ui/core';

import allPeople from '../../data';

import { LOADING, SAVE_DATA } from '../../constants';


class DropDown extends React.Component {
  state = {
    state: null
  };

  handleChange = event => {
    this.setState({ state: event.target.value });
  };

  handleSelection = async () => {
    const { dispatch } = this.props;
    dispatch({
      type: LOADING
    });

    // fake API call
    await this.stall();

    dispatch({
      type: SAVE_DATA,
      payload: allPeople,
      state: this.state.state
    });
  };

  stall = async (stallTime = 3000) => {
    await new Promise(resolve => setTimeout(resolve, stallTime));
  };

  render() {
    const { state } = this.state;

    if (this.props.selectedState) {
      return <Redirect exact to={'/app/main'} />;
    }

    return (
      <Container>

            <FormControl style={classes.formControl}>
              <InputLabel id="demo-controlled-open-select-label">
                Select State
              </InputLabel>
              <NativeSelect
                value={state ?? this.props.selectedState}
                name="state"
                onChange={this.handleChange}
                inputProps={{ 'aria-label': 'state' }}
                variant="standard"
              >
                <option value="" disabled></option>
                <option value={'NY'}>New York</option>
                <option value={'MO'}>Missouri</option>
                <option value={'IL'}>Illinois</option>
              </NativeSelect>
              <Box mt={3} mr={3}>
                <Button
                  disabled={!this.state.state}
                  variant="contained"
                  color="primary"
                  onClick={this.handleSelection}
                >
                  Continue
                </Button>
              </Box>
            </FormControl>
      </Container>
    );
  }
}

function mapStateToProps(state) {
  return { selectedState: state.data.state, loading: state.data.loading };
}

export default withRouter(connect(mapStateToProps)(DropDown));

Вот мой маршрутизатор:

const DataRoute = ({ data, dispatch, component, ...rest }) => {
  if (!data) {
    return <Redirect to="/home" />;
  } else {
    return (
      <Route
        {...rest}
        render={props => React.createElement(component, props)}
      />
    );
  }
};

<HashRouter>
          <Switch>
            <Route path="/" exact render={() => <Redirect to="/app/main" />} />
            <Route
              path="/app"
              exact
              render={() => <Redirect to="/app/main" />}
            />
            {/* <Route path="/app/main" component={LayoutComponent} /> */}

            <DataRoute
              path="/app"
              dispatch={this.props.dispatch}
              component={LayoutComponent}
            />
            <Route path="/error" exact component={ErrorPage} />
            <Route path="/home" exact component={Home} />
          </Switch>
        </HashRouter>