title: how to use material-ui select field with formik?
body: <p>I'm tryin to use formik with material-ui Textfield componet with select attr, everytime i change option it gives me this Warning</p>
  <blockquote>
  <p>Material-UI: You have provided an out-of-range value <code>null</code> for the select (name=&quot;subIndicatorId&quot;) component.
  Consider providing a value that matches one of the available options or ''.
  The available values are <code>1</code>, <code>2</code>, <code>3</code>, <code>4</code>, <code>5</code>, <code>55</code>, <code>161</code>, <code>162</code>, <code>163</code>, <code>164</code>, <code>193</code>, <code>233</code>, <code>234</code>, <code>235</code>, <code>236</code>, <code>237</code>, <code>238</code>, <code>239</code>, <code>240</code>, <code>241</code>, <code>242</code>, <code>243</code>, <code>244</code>, <code>245</code>, <code>246</code>, <code>262</code>, <code>263</code>, <code>264</code>, <code>265</code>, <code>266</code>, <code>267</code>, <code>268</code>, <code>271</code>, <code>286</code>, <code>288</code>, <code>289</code>, <code>295</code>, <code>300</code>, <code>303</code>, <code>304</code>, <code>306</code>, <code>307</code>, <code>311</code>, <code>341</code></p>
  </blockquote>
  <p>alsol i get this Warning when the page render first time</p>
  <blockquote>
  <p>Warning: <code>value</code> prop on <code>input</code> should not be null. Consider using an empty string to clear the component or <code>undefined</code> for uncontrolled components.</p>
  </blockquote>
  <p>here is the code for this</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { useState, useEffect } from "react";
  
  import Button from "@material-ui/core/Button";
  import TextField from "@material-ui/core/TextField";
  
  import { Col, Container, Row } from "react-bootstrap";
  
  import { useFormik } from "formik";
  import * as yup from "yup";
  
  import { axios } from "../Axios/Axios";
  
  import icommodityGroup from "../../assets/images/png/product.png";
  import wheatBag from "../../assets/images/png/Wheat Bag.png";
  import flag from "../../assets/images/png/flag.png";
  import { MenuItem } from "@material-ui/core";
  
  const RetailPrices = () =&gt; {
    const [genralIndicators, setGenralIndicators] = useState([]);
    const [governorates, setGovernorate] = useState([]);
    const [subIndicator, setSubIndicator] = useState([]);
    const [classification, setClassification] = useState();
  
    const getPopulate = async () =&gt; {
      const response = await axios
        .get("/home/PopulateDropDowns")
        .catch((err) =&gt; console.log("Error", err)); //handle errors
      if (response &amp;&amp; response.data) {
        console.log(response);
        setGenralIndicators(response.data.genralIndicators);
        setGovernorate(response.data.governorates);
        setClassification(response.data.classification);
      }
    };
  
    const getSubindicator = async (id) =&gt; {
      console.log(id);
      const response = await axios
        .get(`/home/SubIndicator/${id}`)
        .catch((err) =&gt; console.log("Error", err)); //handle errors
      if (response &amp;&amp; response.data) {
        setSubIndicator(response.data);
      }
    };
  
    useEffect(() =&gt; {
      getPopulate();
    }, []);
  
    const handleGenralIndicatorsChange = (e) =&gt; {
      getSubindicator(e.target.value);
    };
  
    // Schema for yup
    const validationSchema = yup.object({
      commodityGroup: yup
        .string("أختر المجموعة السلعية")
        .required("أختر المجموعة السلعية "),
      // commodity: yup.string("أختر السلعة").required("أختر السلعة"),
      // city: yup.string("أختر المدينة").required("أختر المدينة"),
    });
  
    const formik = useFormik({
      initialValues: {
        ClassificationId: 1,
        GeneralIndicatorId: null,
        GovernorateId: null,
        subIndicatorId: null,
      },
      // validationSchema: validationSchema,
  
      onSubmit: async (values) =&gt; {
        alert(JSON.stringify(values, null, 2));
        const response = await axios
          .post("/home/PriceSearch", JSON.stringify(values, null, 2))
          .catch((err) =&gt; console.log("Error", err)); //handle errors;
        if (response) {
          alert("sucess!");
          console.log(response);
        }
      },
    });
  
    return (
      &lt;div&gt;
        &lt;form onSubmit={formik.handleSubmit}&gt;
          &lt;Row&gt;
            &lt;Col className="px-0"&gt;
              &lt;img
                className="p-1"
                src={icommodityGroup}
                alt="icon_1"
                style={{
                  borderRadius: "6px",
                  boxShadow: "10px 10px 5px 0px rgba(179, 179, 179, 0.36)",
                }}
              /&gt;
  
              &lt;TextField
                style={{ width: "200px" }}
                className="px-2 my-2"
                variant="outlined"
                name="GeneralIndicatorId"
                id="المجموعة السلعية"
                select
                label="المجموعة السلعية"
                value={formik.values.GeneralIndicatorId}
                onChange={(e) =&gt; {
                  formik.handleChange(e);
                  handleGenralIndicatorsChange(e);
                }}
                error={
                  formik.touched.genralIndicators &amp;&amp;
                  Boolean(formik.errors.genralIndicators)
                }
                helperText={
                  formik.touched.genralIndicators &amp;&amp;
                  formik.errors.genralIndicators
                }
              &gt;
                {genralIndicators.map((option) =&gt; (
                  &lt;MenuItem key={option.id} value={option.id}&gt;
                    {option.name}
                  &lt;/MenuItem&gt;
                ))}
              &lt;/TextField&gt;
            &lt;/Col&gt;
            &lt;Col className="px-0"&gt;
              &lt;img
                className="p-1"
                src={wheatBag}
                alt="icon_1"
                style={{
                  borderRadius: "6px",
                  boxShadow: "10px 10px 5px 0px rgba(179, 179, 179, 0.36)",
                }}
              /&gt;
              &lt;TextField
                style={{ width: "200px" }}
                className="px-2 my-2"
                variant="outlined"
                name="subIndicatorId"
                id="السلعة"
                select
                label="السلعة"
                value={formik.values.subIndicatorId}
                onChange={formik.handleChange}
                error={
                  formik.touched.subIndicator &amp;&amp;
                  Boolean(formik.errors.subIndicator)
                }
                helperText={
                  formik.touched.subIndicator &amp;&amp; formik.errors.subIndicator
                }
              &gt;
                {subIndicator.map((option) =&gt; (
                  &lt;MenuItem key={option.id} value={option.id}&gt;
                    {option.name}
                  &lt;/MenuItem&gt;
                ))}
              &lt;/TextField&gt;
            &lt;/Col&gt;
            &lt;Col className="px-0"&gt;
              &lt;img
                className="p-1"
                src={flag}
                alt="icon_1"
                style={{
                  borderRadius: "6px",
                  boxShadow: "10px 10px 5px 0px rgba(179, 179, 179, 0.36)",
                }}
              /&gt;
              &lt;TextField
                style={{ width: "200px" }}
                className="px-2 my-2"
                variant="outlined"
                name="GovernorateId"
                id="المحافظة"
                select
                label="المحافظة"
                value={formik.values.GovernorateId}
                onChange={formik.handleChange}
                error={
                  formik.touched.governorates &amp;&amp;
                  Boolean(formik.errors.governorates)
                }
                helperText={
                  formik.touched.governorates &amp;&amp; formik.errors.governorates
                }
              &gt;
                {governorates.map((option) =&gt; (
                  &lt;MenuItem key={option.id} value={option.id}&gt;
                    {option.name}
                  &lt;/MenuItem&gt;
                ))}
              &lt;/TextField&gt;
            &lt;/Col&gt;
            &lt;Col&gt;
              &lt;Button
                className="p-3 my-2 "
                size="large"
                variant="contained"
                type="submit"
                style={{
                  color: "#fff",
                  backgroundColor: "var(--main-green)",
                  width: "200px",
                }}
              &gt;
                إرسال
              &lt;/Button&gt;
            &lt;/Col&gt;
          &lt;/Row&gt;
        &lt;/form&gt;
      &lt;/div&gt;
    );
  };
  
  export default RetailPrices;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>it works fine and return response, but i want to handle these two warnings</p>