This can be tested via create react app.

App.css

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #09d3ac;
}

App.js

import React from "react";
import { Formik, Field } from "formik";
import * as yup from "yup";

import { DisplayFormikState } from "./helper";
import "./App.css";

const validationSchema = yup.object().shape({
  menu1: yup.string().required(),
  menu2: yup.string().required()
});

const initialValues = {
  menu1: undefined,
  menu2: undefined
};

const MENUS = [
  {
    options: ["1", "2", "3"]
  },
  {
    options: ["a", "b", "c"]
  }
];

class Fields extends React.Component {
  componentDidUpdate(prevProps) {
    const { formik } = this.props;
    if (formik.values.menu1 !== prevProps.formik.values.menu1) {
      formik.setFieldValue("menu2", "");
    }
  }

  render() {
    const { formik } = this.props;
    return (
      <React.Fragment>
        <h1>Your code here</h1>
        <button type="submit">Submit</button>
        <Field name="menu1">
          {({ field }) => (
            <select
              value={field.value}
              onChange={ev => {
                const { value } = ev.target;
                formik.setFieldValue("menu1", value);
                formik.setFieldTouched("menu1", true);
              }}
            >
              <option value="">Select</option>
              {MENUS[0].options.map(o => (
                <option value={o}>{o}</option>
              ))}
            </select>
          )}
        </Field>
        <Field name="menu2">
          {({ field }) => (
            <select
              value={field.value}
              onChange={ev => {
                const { value } = ev.target;
                formik.setFieldValue("menu2", value);
                formik.setFieldTouched("menu2", true);
              }}
            >
              <option value="">Select</option>
              {MENUS[0].options.map(o => (
                <option value={o}>{o}</option>
              ))}
            </select>
          )}
        </Field>
      </React.Fragment>
    );
  }
}

const App = () => (
  <div className="App">
    <Formik
      initialValues={initialValues}
      onSubmit={() => {}}
      validationSchema={validationSchema}
    >
      {props => {
        return (
          <form onSubmit={props.handleSubmit}>
            <Fields formik={props} />
            <DisplayFormikState {...props} />
          </form>
        );
      }}
    </Formik>
  </div>
);

export default App;

helper.js

import React from "react";

export const DisplayFormikState = props => (
  <div style={{ margin: "1rem 0" }}>
    <h3 style={{ fontFamily: "monospace" }} />
    <pre
      style={{
        background: "#f6f8fa",
        fontSize: ".65rem",
        padding: ".5rem",
        textAlign: "left"
      }}
    >
      <strong>props</strong> = {JSON.stringify(props, null, 2)}
    </pre>
  </div>
);

package.json

{
  "name": "formiktest",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "formik": "^2.0.6",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-scripts": "3.2.0",
    "yup": "^0.27.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}