Applying a React component button with React CustomRenderer

//app.js
import './App.css'
import { GridView, LocalDataProvider } from 'realgrid'
import { columns, fields, rows } from './realgrid-data'
import { useEffect, useRef } from 'react'
import { createRoot } from 'react-dom/client';
import 'realgrid/dist/realgrid-style.css'
 
export const SwitchToggle = ({text, dataRow, dataField, id, onChange, disabled, value}) => {
   return (
       <>
           <label className="switch">
               <input type="checkbox" data-row={dataRow} data-field={dataField} id={id} onChange={onChange} checked={value} />
               <span className="slider round"></span>
           </label>
       </>
   )
}
 
function App() {
   const realgridElement = useRef(null);
   const gridView = useRef(null);
 
   useEffect(() => {
     const container = realgridElement.current;
     const dp = new LocalDataProvider(true);
     const gv = gridView.current = new GridView(container);
 
     gv.setDataSource(dp);
     dp.setFields(fields);
     gv.setColumns(columns);
     dp.setRows(rows);
     gv.displayOptions.rowHeight = 40;
 
     gv.registerCustomRenderer("switch", {
         initContent(dom) {
             //@ts-ignore
             this._root = createRoot(dom);
         },
         clearContent(dom) {
             //@ts-ignore
             const root = this._root;
             root.unmount();
         },
         render(grid, model, w, h, info) {
             const root = this._root;
             const id = `id_check_${model.item.dataRow}`;
             root.render(<SwitchToggle id={id} dataRow={model.index.dataRow}
                           dataField={model.index.column.fieldName}
                           onChange={checkOnChange}
                           disabled={false} text={""}
                           value={model.value}></SwitchToggle>)
         },
         canClick(event) {
             return true;
         },
         click() {
             return {};
         }
     });
 
     const checkOnChange = (e) => {
       const target = e.target;
       const dataRow = parseInt(target.getAttribute("data-row"));
       const dataField = target.getAttribute("data-field");
       const dp = gridView.current.getDataSource();
       dp.setValue(dataRow, dataField, target.checked);
     };
 
 
     return () => {
       dp.clearRows();
       gv.destroy();
       dp.destroy();
     }
   }, [])
 
   return (
     <div className='App'>
       <h2>RealGrid2 React Sample</h2>
       <div
         style={{ height: '500px', width: '100%' }}
         ref={realgridElement}></div>
     </div>
   )
}
 
export default App

/* style */
.rg-icon-renderer > span {
   display: inline-block;
}
/* The switch - the box around the slider */
.switch {
   position: relative;
   display: inline-block;
   width: 60px;
   height: 34px;
}
 
/* Hide default HTML checkbox */
.switch input {
   opacity: 0;
   width: 0;
   height: 0;
}
 
/* The slider */
.slider {
   position: absolute;
   cursor: pointer;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: #ccc;
   -webkit-transition: .4s;
   transition: .4s;
}
 
.slider:before {
   position: absolute;
   content: "";
   height: 26px;
   width: 26px;
   left:4px;
   bottom: 4px;
   background-color: white;
   -webkit-transition: .4s;
   transition: .4s;
}
 
input:checked + .slider {
   background-color: #2196F3;
}
 
input:focus + .slider {
   box-shadow: 0 0 1px #2196F3;
}
 
input:checked + .slider:before {
   -webkit-transform: translateX(26px);
   -ms-transform: translateX(26px);
   transform: translateX(26px);
}
 
/* Rounded sliders */
.slider.round {
   border-radius: 34px;
}
 
.slider.round:before {
   border-radius: 50%;
}