Как заполнить 2-й выпадающий список на основе выбора из 1-го выпадающего списка, используя компонент функции реагирования с крюками реагирования и реактивным редуксом?

Question

Я пытаюсь заполнить второе раскрывающееся меню на основе выбора первого раскрывающегося списка. Я только что начал с ReactionJS, как месяц назад, с реакционными хуками и реагирующим-редуксом.

Все ответы, которые я нашел, были основаны на компонентах класса, и ни один из них не использовал Redux. Я хочу решить эту проблему только с помощью ответных зацепок и реагирующих заговоров. Любая помощь могла бы быть полезна. Это состояние, когда страница загружается

const AddRequest = ({
  addRequest,
  getActivities,
  activities
}) => {
  useEffect(() => {
    getActivities();

  }, [getActivities]);
  const [formData, setFormData] = useState({
    activity: "",
    subActivity: ""
  });

  const { activity, subActivity } = formData;

  const onChangeHandler = e => {
    e.preventDefault();
    setFormData({ ...formData, [e.target.name]: e.target.value });
  };

  const onSubmitHandler = e => {
    e.preventDefault();
    addRequest(formData, history);
  };

  let activityOptions = activities.map(activity => (
    <option key={activity._id} value={activity.activityName}>
      {activity.activityName}
    </option>
  ));

return (
        <form className="form-signin" onSubmit={e => onSubmitHandler(e)}>          
          <div className="form-label-group">
                    <select
                      className="form-control"
                      name="activity"
                      value={activity}
                      onChange={e => onChangeHandler(e)}
                    >
                      <option>Select Activity</option>
                      {activityOptions}
                    </select>
                  </div>

                  <div className="form-label-group">
                    <select
                      className="form-control"
                      name="subActivity"
                      value={subActivity}
                      defaultValue={{ label: "Select sub Activity", value: 0 }}
                      onChange={e => onChangeHandler(e)}
                    >
                      <option>Select Sub Activity</option>
                      {activities.subActivities.map((subAct, index) => (
                        <option key={index} value={subAct}>
                          {subAct}
                        </option>
                      ))}
                    </select>
                  </div>

                  <div className="form-label-group">
                    <input
                      type="text"
                      className="form-control"
                      placeholder="Description (optional)"
                      value={description}
                      required
                    />
                  </div>

                  <hr className="my-4" />

                  <button
                    className="btn btn-lg btn-primary btn-block text-uppercase"
                    type="submit"
                  >
                    Submit
                  </button>
                </form>
);

AddRequest.propTypes = {
  getActivities: PropTypes.func.isRequired,
  addRequest: PropTypes.func.isRequired
};

const mapStateToProps = state => ({
  activities: state.activity.activities,

});

export default connect(
  mapStateToProps,
  { addRequest, getActivities }
)(withRouter(AddRequest));