title: TypeError: props.set is not a function
body: <p>I'm extremely new to ReactJS and have been struggling quite a bit. Right now, I'm trying to create a setting in an admin page where the admin can enter text and update a section on the web app's home page. I created <code>const [aboutBox, setAboutBox] = useState("")</code> in Home.js and passed it as props to another file. However, every time I try to type anything in the text box on the admin page, it throws the error "TypeError: props.setAboutBox is not a function". I have used the same format to create other functions and those have worked, so I'm not exactly sure what's going wrong. Any help would be greatly appreciated!! Thank you guys so much!</p>
  
  <pre><code>const HomeAboutForm = (props) =&gt; {
      const handleInputChange = event =&gt; {
          console.log('handle input change')
          const box = event.target;
          props.setAboutBox({ ...props.aboutBox,box})
          }
      return (
          &lt;form&gt;
              &lt;TextField 
               onSubmit = { event =&gt; {
                  event.preventDefault();
                  if (!props.aboutBox) return
                  const box = event.target;
                  props.setAboutBox({ ...props.aboutBox,box})
                  console.log(props.aboutBox)
                  }}
                  placeholder="Enter new text for About Section here"
                  multiline
                  value={props.aboutBox}   
                  variant="outlined"
                  rows={4}
                  style={{ margin: "10px", width: '600px' }}
                  rowsMax={6}
                  required
                  input type="text" name="name" value={props.aboutBox} onChange={handleInputChange}
                  &gt;
                  &lt;input type="text" name="name" value={props.aboutBox} onChange={handleInputChange} /&gt;
                  &lt;/TextField&gt;
                  &lt;p&gt;&lt;/p&gt;
                  &lt;input type="submit" value="Submit" /&gt; 
  
              &lt;/form&gt;  
      );
  };
  </code></pre>
  
  <p>EDIT: The parent component to HomeAboutForm also has its own parent component, but the code calling HomeAboutForm is </p>
  
  <pre><code>            &lt;HomeAboutForm 
              aboutBox = {props.aboutBox}
              setAboutBox = {props.setAboutBox}/&gt;
  </code></pre>
  
  <p>There is however, a function called getChoiceView that is called like <code>{getChoiceView(pageNum,props)}</code> and then from there, the function has the code</p>
  
  <pre><code>const getChoiceView = (pageNum, props) =&gt; {
      switch (pageNum) {
          case 0:
              return &lt;AddPhoto /&gt;;
          case 1:
              return &lt;HomeUpdateAboutView 
              aboutBox = {props.aboutBox}
              setAboutBox = {props.setAboutBox}/&gt;;
          case 2:
              return &lt;HomeUpdateStylistForm /&gt;;
          default:
              return "Unknown pageView";
      }
  };
  </code></pre>
  
  <p>Could how I'm calling getChoiceView be the issue?</p>