title: Component doesn't re-render when props change using useState hook
body: <p>Everytime I get new data in data prop but the component dont re-render untill I call <code>handlePanelSelection()</code></p>
  <pre class="lang-react prettyprint-override"><code>function StepPanel({ data, getTranslations }) {
    const [panelsData, changePanel] = useState(data);
  
    function handlePanelSelection(panelId) {
      switch (panelId) {
        case 8:
          changePanel(getTranslations.NeeSubCategory);
          break;
        default:
          changePanel(data);
          break;
      }
    }
    return (
      &lt;&gt;
        {panelsData.map(details =&gt; {
          const imgsrc = requireContext('./' + details.image);
          return (
            &lt;div key={details.id} className=&quot;block-list&quot;&gt;
              &lt;div className=&quot;left-block&quot;&gt;
                &lt;img src={imgsrc} alt=&quot;&quot; /&gt;
              &lt;/div&gt;
              &lt;div className=&quot;right-block&quot;&gt;
                &lt;h3&gt;{details.title}&lt;/h3&gt;
                &lt;p&gt;{details.description}&lt;/p&gt;
                &lt;label htmlFor=&quot;radio1&quot; className=&quot;radio-btn&quot;&gt;
                  &lt;input
                    type=&quot;radio&quot;
                    onClick={() =&gt; handlePanelSelection(details.id)}
                    name=&quot;radio1&quot;
                  /&gt;
                  &lt;span&gt;&lt;/span&gt;
                &lt;/label&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          );
        })}
      &lt;/&gt;
    );
  }
  </code></pre>
  <p>but when I remove the hook like below it works</p>
  <pre class="lang-react prettyprint-override"><code>function StepPanel({ data, getTranslations }) {
   
    return (
      &lt;&gt;
        {data.map(details =&gt; { ... })}
      &lt;/&gt;
    )
  }
  </code></pre>
  <p>I want to implement a functionality that when I get new data in data props the component gets re-render but also when I need to internally re-render i.e. like I change <code>panelId = 8</code>, then also it gets re-render, is it possible with this approach?</p>
  <p>The above code seems to rerender but with the same data every time i.e. Its not updating the <code>panelData</code> everytime although everytime the data props is being provided with a new updated value</p>
  <p><a href="https://i.stack.imgur.com/Uww0M.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Uww0M.png" alt="console image" /></a></p>