title: React dropdown with options from Firebase realtime db (Formik + materialUI)
body: <p>I'm having trouble with the dropdown that maps through the data I fetch from the Firebase realtime db and assigns selected value to the Formik form in order to save it to another object in the database.</p>
  <p>I have restaurants object with pushId key containing name, city, and id (pushId key), and I have dishes with pushId key containing name, price, id (pushId key), restaurantId (id of the restaurant).</p>
  <p><a href="https://i.stack.imgur.com/iresg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/iresg.png" alt="enter image description here" /></a></p>
  <p><a href="https://i.stack.imgur.com/Rx122.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Rx122.png" alt=" " /></a></p>
  <p>*Here I need another key:value pair that will be for example restaurantId: &quot;-MCvTh91-qHLcy09ZpYm&quot;</p>
  <p>I did a fetch of restaurants using useEffect hook:</p>
  <pre><code>const [restaurants, setRestaurants] = useState([])
  
  useEffect(() =&gt; {
     let restQuery = Firebase.database().ref('restaurants').orderByKey()
     restQuery.once('value').then(function(snapshot) {
        snapshot.forEach(function(childSnapshot) {
           setRestaurants(prevState =&gt; [...prevState, childSnapshot.val()])
        })
     })
  },[])
  </code></pre>
  <p>But I simply can't map the restaurants array to the dropdown form options and if I select a restaurant save its id to the Formik value</p>
  <pre><code>&lt;Formik
    initialValues={{
       name: '',
       price: '',
       restaurantId: '',
    }}
    onSubmit = {(data, {resetForm}) =&gt; {
       console.log('submit: ', data)
       resetForm()
    }}&gt;
       {({values, handleChange, handleSubmit}) =&gt; (
         &lt;Form onSubmit={handleSubmit}&gt;
            &lt;Field name=&quot;name&quot; type=&quot;input&quot; as={TextField} /&gt;&lt;br/&gt;
            &lt;Field name=&quot;price&quot; type=&quot;input&quot; as={TextField} /&gt;&lt;br/&gt;
            &lt;div&gt;Restaurants:&lt;/div&gt;
            &lt;Field type=&quot;select&quot; as={Select}&gt;
                {restaurants.map((rest) =&gt; 
                   &lt;MenuItem name=&quot;restaurantId&quot; value={rest.id}&gt;
                      {rest.name}
                   &lt;/MenuItem&gt;
                )}
            &lt;/Field&gt;
            &lt;div&gt;
               &lt;Button type=&quot;submit&quot;&gt;Submit&lt;/Button&gt;
            &lt;/div&gt;
         &lt;/Form&gt;
       )}
  &lt;/Formik&gt;
  </code></pre>
  <p>This gives mi selection of the restaurants in the dropdown like:</p>
  <p><a href="https://i.stack.imgur.com/DM8as.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DM8as.png" alt="enter image description here" /></a></p>
  <p>However, when I click on the option the error console throws these warnings and nothing happens</p>
  <pre><code>Warning: Formik called `handleChange`, but you forgot to pass an `id` or `name` attribute to your input: undefined
  Formik cannot determine which value to update. For more info see https://github.com/jaredpalmer/formik#handlechange-e-reactchangeeventany--void
    
  
  Material-UI: You have provided an out-of-range value `[object Object]` for the select component.
  Consider providing a value that matches one of the available options or ''.
  The available values are `-MCvTh91-qHLcyO9ZpYm`, `-MCxfsFz6pSaokkbBwpA`, `-MCxg6CB_U4HaCE659Tw`.
  </code></pre>
  <p>I'm stuck on these and anything I try doesn't work.</p>