title: OnChange Event Stuck in Loop, Crashing
body: <p>I am getting an infinite loop / crash here.</p>
  <p>I'm trying to get an onChange event fired for these radio buttons (which are built after pulling data from a query), but I think it keeps redrawing and I can't figure out why.</p>
  <p>Any thoughts on how I can solve this?</p>
  <pre><code>
  const GetChallenge = async () =&gt; {
    const slug = useParams()
    const data = await shopifyApolloClient.query({ query: singleProduct(slug) })
    return data
  }
  
  const Challenge = () =&gt; {
  
    let [loaded, setLoaded] = useState(false)
    let [product, setProduct] = useState([])
    let [variants, setVariants] = useState([])
    let [options, setOption] = useState()
    let [metafields, setMetafields] = useState([])
  
  
    GetChallenge().then((ret) =&gt; {
      setProduct(ret.data.product)
      setVariants(ret.data.product.variants.edges)
      setOption(ret.data.product.variants.edges[0].node.title)
      setMetafields(ret.data.product.metafields.edges)
      setLoaded(true)
    })
  
    const handleOptions = (event) =&gt; {
      setOption(event.target.value)
    }
  
    if (loaded === true) {
  
      return (
        &lt;div&gt;
          {variants.map((e) =&gt; (
            &lt;label
              htmlFor={e.node.title}
              key={e.node.id}&gt;
              &lt;input
                type=&quot;radio&quot;
                name=&quot;options&quot;
                checked={e.node.title === options}
                value={e.node.title}
                onChange={handleOptions}
              /&gt;
              {e.node.title}
            &lt;/label&gt;
          ))}
        &lt;/div&gt;
      )
  
    } else {
      return (
        &lt;p&gt;Not Loaded&lt;/p&gt;
      )
    }
  }
  </code></pre>