Tengo un problema en el componente de la tabla de datos de reacción donde las casillas de verificación en mi tabla de datos no permanecen "marcadas".

Veo que hay una indicación de que se produjo la verificación, pero no veo que permanezca marcada:

Es raro, ¿verdad? ¿Por qué está pasando eso?

Aquí está mi código:

 <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 />

¿Quizás tenga algo que ver con selectableRowsComponent y Checkbox ?

Así es como se incorpora a este código:

 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> </> ) })

Estoy tratando de que las casillas de verificación permanezcan marcadas.

¿Cómo hacerlo?