title: TypeError: Cannot assign to read only property - in React child component
body: <p>I have a global variable declared in App.js. It is declared outside of my App() function in App.js.</p>
  <p>I pass this data down as props to my child function using <code>plyViewed={plyViewed}</code></p>
  <p>The error I get is when I try to update plyViewed. For example...</p>
  <p><code>props.plyViewed--</code></p>
  <p>It seems read only.</p>
  <p>What am I doing wrong?</p>
  <pre><code>export default function MoveButtons(props) {
    return (
      &lt;Grid item xs={6}&gt;
        &lt;Button
          variant=&quot;contained&quot;
          color=&quot;primary&quot;
          size=&quot;large&quot;
          style={{ maxWidth: props.buttonWidth, minWidth: props.buttonWidth }}
          onClick={() =&gt; {
            if (props.plyViewed &gt; 0) {
              props.plyViewed--;
              props.board.current.setPosition(props.fenHistory[props.plyViewed]);
              props.setFen(props.fenHistory[props.plyViewed]);
              props.setSelectedIndex(props.plyViewed);
            }
          }}
        &gt;
          &lt;NavigateBeforeIcon /&gt;
        &lt;/Button&gt;
      &lt;/Grid&gt;
    );
  }
  </code></pre>