title: React grid layout custom resize handle is not working
body: <p>According to <a href="https://github.com/react-grid-layout/react-grid-layout#grid-layout-props" rel="nofollow noreferrer">React-Grid-Layout doc</a></p>
  <p><code>resizeHandle?: ReactElement&lt;any&gt; | ((resizeHandleAxis: ResizeHandleAxis, ref: ReactRef&lt;HTMLElement&gt;) =&gt; ReactElement&lt;any&gt;)</code></p>
  <p>can be used to implement custom resize handle for the grid items.</p>
  <p>In my case this is not working. It's not even throwing any errors.</p>
  <p>Code:
  <a href="https://codesandbox.io/s/react-playground-forked-jwfn3?file=/index.js" rel="nofollow noreferrer">https://codesandbox.io/s/react-playground-forked-jwfn3?file=/index.js</a></p>
  <p><strong>Note:</strong> If I remove <code>resizeHandle={&lt;BottomRightHandle /&gt;}</code> grid items will get default resize handler, Which is working fine.</p>
  <p>CustomResizeHandle.js</p>
  <pre><code>import React from &quot;react&quot;;
  
  const SouthEastArrow = () =&gt; (
    &lt;svg
      width=&quot;20px&quot;
      height=&quot;20px&quot;
      version=&quot;1.1&quot;
      viewBox=&quot;0 0 100 100&quot;
      xmlns=&quot;http://www.w3.org/2000/svg&quot;
    &gt;
      &lt;path d=&quot;m70.129 67.086l1.75-36.367c-0.035156-2.6523-2.9414-3.6523-4.8164-1.7773l-8.4531 8.4531-17.578-17.574c-2.3438-2.3438-5.7188-1.5625-8.0586 0.78125l-13.078 13.078c-2.3438 2.3438-2.4141 5.0117-0.074219 7.3516l17.574 17.574-8.4531 8.4531c-1.875 1.875-0.83594 4.8203 1.8164 4.8555l36.258-1.8594c1.6836 0.019531 3.1328-1.2812 3.1133-2.9688z&quot; /&gt;
    &lt;/svg&gt;
  );
  
  const CustomHandle = (props) =&gt; (
    &lt;div
      style={{
        background: &quot;#fff&quot;,
        borderRadius: &quot;2px&quot;,
        border: &quot;1px solid #ddd&quot;,
        position: &quot;absolute&quot;,
        bottom: 0,
        right: 0,
        padding: 0,
        cursor: &quot;se-resize&quot;
      }}
      {...props}
    /&gt;
  );
  
  const BottomRightHandle = () =&gt; (
    &lt;CustomHandle&gt;
      &lt;SouthEastArrow /&gt;
    &lt;/CustomHandle&gt;
  );
  
  export default BottomRightHandle;
  </code></pre>
  <p>index.js</p>
  <pre><code>import React from &quot;react&quot;;
  import ReactDOM from &quot;react-dom&quot;;
  import { Grid, Row, Col } from &quot;react-flexbox-grid&quot;;
  
  import { Responsive, WidthProvider } from &quot;react-grid-layout&quot;;
  
  import &quot;../../node_modules/react-grid-layout/css/styles.css&quot;;
  import &quot;../../node_modules/react-resizable/css/styles.css&quot;;
  
  import BottomRightHandle from &quot;./CustomResizeHandle&quot;;
  
  const ResponsiveGridLayout = WidthProvider(Responsive);
  
  const Layout = (props) =&gt; {
    const [items, setItems] = React.useState([
      { i: &quot;a&quot;, x: 0, y: 0, w: 2, h: 1 },
      { i: &quot;b&quot;, x: 2, y: 0, w: 2, h: 1 }
    ]);
  
    return (
      &lt;ResponsiveGridLayout
        className=&quot;layout&quot;
        layouts={{ lg: items }}
        breakpoints={{ lg: 1200, md: 996, sm: 768 }}
        cols={{ lg: 12, md: 10, sm: 6 }}
        resizeHandles={[&quot;se&quot;]}
        resizeHandle={&lt;BottomRightHandle /&gt;}
      &gt;
        {items.map((item) =&gt; {
          return (
            &lt;div
              key={item.i}
              style={{ backgroundColor: &quot;#ccc&quot; }}
              data-grid={{ x: item.x, y: item.y }}
            &gt;
              {item.i}
            &lt;/div&gt;
          );
        })}
      &lt;/ResponsiveGridLayout&gt;
    );
  };
  
  class App extends React.Component {
    render() {
      return (
        &lt;Grid&gt;
          &lt;Row&gt;
            &lt;Col&gt;
              &lt;Layout /&gt;
            &lt;/Col&gt;
          &lt;/Row&gt;
        &lt;/Grid&gt;
      );
    }
  }
  
  ReactDOM.render(&lt;App /&gt;, document.getElementById(&quot;container&quot;));
  </code></pre>