title: React-Final-Form: Is there a way to not re-render form after component change?
body: <p>So, I'm having a hard time trying to figure this out.
  Basically I have a component not related to React Final Form but inside the <strong>Form</strong> tags. The main approach is to when a user clicks on a button (in this case a tooth) its value changes and fills in with a purple color to show if its clicked - if not fills it with a white one. But when I fill in the Form and I click on the component that has the teeth the whole Form re-renders. Is there any way to handle this kind of behavior? Maybe I'm mistaken and it have something to do with my custom component.</p>
  
  <p>Code got kinda big so i'll exemplify how it was built:</p>
  
  <pre><code>&lt;Form
    initialValues={exam}
    onSubmit={onSubmit}
    render={({ handleSubmit, form, submitting, pristine, values }) =&gt; (
      &lt;form onSubmit={handleSubmit}&gt;
       /*Custom component handling the teeth I mentioned*/
       &lt;ConeBeam onClick={toothClicked} color="white" data={teeth} /&gt;
       /*TextField related to React-Final-Form using mui-rff*/
       &lt;TextField
          label="Region"
          name="clark_region"
          size="small"
          fullWidth
       /&gt;
      &lt;/form&gt;
    )}
  /&gt;
  
  /*toothClicked function*/
  function toothClicked({ id }) {
  
  const tooth = parseInt(id);
  const el = document.getElementById(id);
  
  if (!teeth.includes(tooth)) {
    setTeeth([...teeth, tooth]);
    el.setAttribute("class", classes.primary);
  } else {
    teeth.splice(teeth.indexOf(tooth), 1);
    setTeeth([...teeth]);
    el.setAttribute("class", classes.white);
  }
  </code></pre>
  
  <p>}</p>
  
  <p><strong>SOLVED!</strong>
  I was using useState which re-renders to change its state. Just changed setTeeth to a simple variable using let.</p>