title: react-data-table-component - Checkboxes won't stay checked
body: <p>I am having a problem in <a href="https://github.com/jbetancur/react-data-table-component" rel="nofollow noreferrer">react-data-table-component</a> where the checkboxes in my datatable don't remain &quot;checked&quot;.</p>
  <p>I do see there is indication the check occurred but not seeing it remaining checked:
  <img src="https://i.imgur.com/sJxlzGF.gif" alt="Alt Text" /></p>
  <p>It's weird, right?  Why is that happening?</p>
  <p>Here's my code:</p>
  <pre><code>             &lt;DataTable
                   title={ `Items` }
                   columns={ columns }
                   data={ filteredItems }
                   pagination
                   paginationResetDefaultPage={ resetPaginationToggle_users }
                   subHeader
                   onRowClicked={ handleRowClicked }
                   selectableRows
                   selectableRowsComponent={Checkbox} // Pass the function only
                   selectableRowsComponentProps={selectProps}
                   onSelectedRowsChange={ handleSelectedRows }
                   responsive
                   expandableRows
                   expandOnRowClicked
                   expandableRowsHideExpander
                   expandableRowsComponent={ &lt;UpdateItemComponent data={ mainData } s={ s } setS={ setS } /&gt; }
                   persistTableHead
               /&gt;
  </code></pre>
  <p>Perhaps it's something to do with <code>selectableRowsComponent</code> and <code>Checkbox</code>?</p>
  <p>Here's how that is being brought into this code:</p>
  <pre><code>
      const Checkbox = React.forwardRef(({ onClick, ...rest }, ref) =&gt;
      {
       return(
           &lt;&gt;
               &lt;div className=&quot;form-check pb-5&quot; style={{ backgroundColor: '' }}&gt;
                   &lt;input 
                       type=&quot;checkbox&quot;
                       className=&quot;form-check-input&quot;
                       style={{ height: '20px', width: '20px' }}
                       ref={ref}
                       onClick={ onClick }
                       {...rest}
                   /&gt;
                   &lt;label className=&quot;form-check-label&quot; id=&quot;booty-check&quot; /&gt;
               &lt;/div&gt;
           &lt;/&gt;
       )
      })
  </code></pre>
  <p>I am trying to have the checkboxes remain checked.</p>
  <p>How to do it?</p>