title: why it's saying Nested block is redundant no-lone-block?
body: <pre><code>`
  import React from 'react';
  import BuildControl from './BuildControl/BuildControl';
  import './BuildControl.css';
  const controls = [{ label: 'Cheese', type: 'cheese' }, { label: 'Bacon', type: 'bacon' }, { label: 'Meat', type: 'meat' }, { label: 'Salad', type: 'salad' }];
  
  
  const BuildControls = () =&gt; {
      controls.map((ctrl) =&gt; {
          console.log("ctrl is:", ctrl.label, ctrl.type);
          return (&lt;div className="BuildControls"&gt;&lt;BuildControl key={ctrl.type} label={ctrl.label}&gt;&lt;/BuildControl&gt;&lt;/div&gt;);
      });
  
  }
  export default BuildControls;
  </code></pre>
  
  <p>`<a href="https://i.stack.imgur.com/T84Yy.png" rel="nofollow noreferrer">enter image description here</a>
  Eslint is not allowing  to return from the callback or something else is wrong.</p>