title: React function prop gives "TypeError is not a function"
body: <p>I am new to react and I'm trying to pass a function as a prop to a child component.
  In my case this is the parent component:</p>
  <pre><code>export default function Game() {
  const [gameStarted, setGameStarted] = useState(false)
  const [gameSettings, setGameSettings] = useState({})
  
  useEffect(() =&gt; {
    //setGameStarted(true);
    }, [gameSettings]
  )
    
  return (
    &lt;&gt;
    {!gameStarted &amp;&amp; 
      &lt;div className=&quot;game-form&quot;&gt;
        &lt;GameSelection handleGameSelection={(settings)=&gt; setGameSettings(settings)}/&gt;
      &lt;/div&gt;}
    &lt;/&gt;
    )}
  </code></pre>
  <p>My child component is:</p>
  <pre><code>export default function GameSelection({handleGameSelection}) {
  const [labels, setLabels] = useState([])
  const [gameMode, setGameMode] = useState('')
  const [selectedLabels, setSelectedLabels] = useState([])
  const [formError, setFormError] = useState(null)
  
  // create label values for react-select
  useEffect(() =&gt; {
      if(document) {
        setLabels(document.cards.map(card =&gt; {
          return { value: {...card}, label: card.label}
        }))
      }
    }, [document])
  
  
  const handleSubmit = (e) =&gt; {
    e.preventDefault()
  
    try{
      const gameSettings = {
        mode: gameMode.value,
        selected: selectedLabels.map((card) =&gt; ({...card.value})),
      }
      handleGameSelection(gameSettings)
    }
    catch(error){
      console.log(error)
    }
  }
  
  return (
      &lt;&gt;
          &lt;h2 className=&quot;page-title&quot;&gt;Please select your game&lt;/h2&gt;
            &lt;form onSubmit={handleSubmit}&gt;
            &lt;label&gt;
                &lt;span&gt;Mode:&lt;/span&gt;
                    &lt;Select
                        onChange={(option) =&gt; setGameMode(option)}
                        options={gameModes}
                    /&gt;
            &lt;/label&gt;
            &lt;label&gt;
                &lt;span&gt;Select labels:&lt;/span&gt;
                    &lt;Select
                        onChange={(option) =&gt; setSelectedLabels(option)}
                        options={labels}
                        isMulti
                    /&gt;
            &lt;/label&gt;
            
            &lt;button className=&quot;btn&quot; &gt;Start game&lt;/button&gt;
    
            {formError &amp;&amp; &lt;p className=&quot;error&quot;&gt;{formError}&lt;/p&gt;}
            &lt;/form&gt;
      &lt;/&gt;
    )}
  </code></pre>
  <p>My form works but when I submit the form I keep getting the error TypeError: handleGameSelection is not a function. I tried everything. I have created a separate function in the parent component and gave that as a prop to the child. That also didn't work. I don't know what I am doing wrong. Any ideas?</p>