title: React not re-rendering after array state update
body: <p>I have a checkbox list UI that is rendered from an array. After I update the array the checkbox list state does not update. </p>
  
  <p>I moved the code where the list is mapped but it does not change the results. The DOM re-render does not happen, see gif below.</p>
  
  <p>I have been looking arround and I see that this issue is already reported however the solution about moving the <code>list.map</code> code out of the function it did not work for me.</p>
  
  <p>Could you suggest me a solution? 
  What is the source of this problem? </p>
  
  <p><a href="https://i.stack.imgur.com/E1pki.gif" rel="noreferrer"><img src="https://i.stack.imgur.com/E1pki.gif" alt="This is the current state"></a></p>
  
  <pre><code>import React,{ useState } from "react"
  
  import
  {
      Box,
      DropButton,
      Grid,
      Text,
      Calendar,
      RangeInput,
      CheckBox
  } from "grommet"
  
  const CalButton = ( { label,onSelect } ) =&gt;
  {
      return (
          &lt;DropButton
              label={ label }
              dropAlign={ { top: 'bottom',left: 'left' } }
              margin="small"
              dropContent={
                  &lt;Box pad="medium" background="ligth-3" elevation="small"&gt;
                      &lt;Calendar range size="medium" onSelect={ onSelect } /&gt;
                  &lt;/Box&gt;
              } /&gt;
      )
  }
  
  const RangeButton = ( { label,value,onChange,min,max,step,unit,header } ) =&gt;
  {
  
      return (
          &lt;DropButton
              label={ value === null ? label : value + ' ' + unit }
              dropAlign={ { top: 'bottom',left: 'left' } }
              margin="small"
              dropContent={
                  &lt;Box pad="medium"
                      background="ligth-3"
                      elevation="small"
                      align="center"
                  &gt;
                      &lt;Text size="small"&gt;{ header }&lt;/Text&gt;
                      &lt;RangeInput
                          value={ value }
                          min={ min } max={ max }
                          onChange={ onChange }
                          step={ step }
                      /&gt;
                      &lt;Text weight="bold"&gt;{ value }&lt;/Text&gt;
                      &lt;Text weight="normal"&gt;{ unit }&lt;/Text&gt;
  
                  &lt;/Box&gt;
              } /&gt;
      )
  }
  
  const FeaturesButton = ( { label,features,onChange } ) =&gt;
  {
      const FeaturesList = ( { features,onChange } ) =&gt; (
          &lt;&gt;
              { features.map( ( item,idx ) =&gt; (
              &lt;CheckBox
                  key={ item.name }
                  label={ item.name }
                  checked={ item.checked }
                  onChange={ e =&gt; onChange( e,idx ) } /&gt;) 
                  )
              }
          &lt;/&gt;
      )
  
  
  
      return (
          &lt;DropButton
              label={ label }
              dropAlign={ { top: 'bottom',left: 'left' } }
              margin="small"
              dropContent={
                  &lt;Box pad="medium"
                      background="ligth-3"
                      elevation="small"
                      align="start"
                      direction="column"
                      gap="small"
                  &gt;
                      &lt;FeaturesList 
                          features={features} 
                          onChange={onChange} /&gt;
  
                  &lt;/Box&gt;
              } /&gt;
      )
  }
  
  
  const destApp = () =&gt;
  {
  
      const [ windStrength,setWindStrength ] = useState( null )
      const [ windFrequency,setWindFrequency ] = useState( null )
      const [ cost,setCost ] = useState( null )
  
      const date = new Date()
      const [ month,setMonth ] = useState( date.getMonth() )
  
      const [ listFeatures,setListFeatures ] = useState( [
          {
              name: 'Butter flat water',
              checked: false,
          },
          {
              name: 'Moderately flat water',
              checked: false,
          },
          {
              name: '1-2m Waves',
              checked: false,
          },
          {
              name: '2m+ Waves',
              checked: false,
          },
          {
              name: 'Beginer Friendly',
              checked: false,
          },
          {
              name: 'Kite-in-kite-out',
              checked: false,
          },
          {
              name: 'Nightlife',
              checked: false,
          }
  
      ] )
      const months = [ 'January','February','March','April','May','June','July','August','September','October','November','December' ];
  
      const updateFeaturesList = ( e,idx ) =&gt;
      {
  
          listFeatures[ idx ].checked = e.target.checked
          const newFeatures = listFeatures
          setListFeatures( newFeatures )
          console.log( "Updated features list",newFeatures,e.target.checked )
      }
  
      return (
          &lt;Grid rows={ [ "xsmall","fill" ] }
              areas={ [ [ "filterBar" ],[ "results" ] ] }
              gap="xxsmall"&gt;
              &lt;Box gridArea="filterBar"
                  direction="row-responsive"
                  gap="xsmall"
                  pad="xsmall"
                  justify="center" &gt;
                  &lt;CalButton label={ months[ month ].toLowerCase() } onSelect={ ( data ) =&gt; console.log( data ) } /&gt;
                  &lt;RangeButton
                      label="wind strength"
                      header="What's your wind preference?"
                      min="15"
                      max="45"
                      unit="kts"
                      value={ windStrength }
                      step={ 1 }
                      onChange={ ( e ) =&gt;
                      {
                          setWindStrength( e.target.value )
                          console.log( windStrength )
                      } } /&gt;
                  &lt;RangeButton
                      label="wind frequency"
                      header="How often does your destination need to be windy?"
                      min="1"
                      max="7"
                      unit="days/week"
                      value={ windFrequency }
                      step={ 1 }
                      onChange={ ( e ) =&gt;
                      {
                          setWindFrequency( e.target.value )
                          console.log( windFrequency )
                      } } /&gt;
                  &lt;RangeButton
                      label="cost"
                      header="Average daily cost: 1 lunch, diner and doubble room at a midrange hotel?"
                      min="10"
                      max="400"
                      unit="€"
                      value={ cost }
                      step={ 1 }
                      onChange={ ( e ) =&gt;
                      {
                          setCost( e.target.value )
                          console.log( cost )
                      } } /&gt;
  
                  &lt;FeaturesButton
                      label="important features "
                      features={ listFeatures }
                      onChange={ updateFeaturesList }
                  /&gt;
              &lt;/Box&gt;
              &lt;Box gridArea="results"
                  margin=""&gt;
                  Results go in here!
  
              &lt;/Box&gt;
  
  
          &lt;/Grid&gt;
  
      )
  }
  
  export default destApp 
  </code></pre>