I am having a problem in react-data-table-component where the checkboxes in my datatable don't remain "checked".

I do see there is indication the check occurred but not seeing it remaining checked:

It's weird, right? Why is that happening?

Here's my code:

             <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={ <UpdateItemComponent data={ mainData } s={ s } setS={ setS } /> }
                 persistTableHead
             />

Perhaps it's something to do with selectableRowsComponent and Checkbox?

Here's how that is being brought into this code:

    const Checkbox = React.forwardRef(({ onClick, ...rest }, ref) =>
    {
     return(
         <>
             <div className="form-check pb-5" style={{ backgroundColor: '' }}>
                 <input 
                     type="checkbox"
                     className="form-check-input"
                     style={{ height: '20px', width: '20px' }}
                     ref={ref}
                     onClick={ onClick }
                     {...rest}
                 />
                 <label className="form-check-label" id="booty-check" />
             </div>
         </>
     )
    })

I am trying to have the checkboxes remain checked.

How to do it?