Checkbox style is ruined onclick cell ag-grid reactjs typescript on Modal window

I have ag-grid rendered from modal and that grid has checkbox column. When I clicked the checkbox to check/uncheck it, the layout or the ui and alignment of the checkbox is ruined. The checkbox is aligned center cell and I want that if I check/uncheck it, the alignment stays the same which is center and the css of the checkbox should not change. Please help. Here's my code

import React, { useState, useCallback} from 'react';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';
import { Modal, Button } from 'react-bootstrap';
const MyGridComponent: React.FC = () => {
  const [rowData] = useState([
    {selectable:true, make: 'Tesla', model: 'Model Y', price: 64950 },
    { selectable:true,make: 'Ford', model: 'F-Series', price: 33850 },
  ]);
  const [showModal, setShowModal] = useState(false);
  const handleCloseModal = useCallback(() => {
    setShowModal(false);
  }, []);
  const handleShowModal = useCallback(() => {
    setShowModal(true);
  }, []);
  const [colDefs] = useState([
     { field: 'selectable', editable:true,
      cellRenderer: (params) => (
        <div
          style={{
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            height: '100%',
            width: '100%',
          }}
          onClick={() => {
            params.node.setDataValue(params.colDef.field, !params.value);
          }}
        >
          <input
            type="checkbox"
            checked={params.value}
            readOnly
            className="ag-input-field-input ag-checkbox-input"
          />
        </div>
      ), },
    { field: 'make' },
    { field: 'model' },
    { field: 'price' },
  ]);

  return (
    <div className="ag-theme-alpine">
      <Button variant="secondary" onClick={handleShowModal}>
        Show Modal
      </Button>

      <Modal show={showModal} onHide={handleCloseModal} size='lg'>
        <Modal.Header closeButton>
          <Modal.Title>Details</Modal.Title>
        </Modal.Header>
        <Modal.Body style={{ height: 300}}>
          <AgGridReact
            rowData={rowData}
            columnDefs={colDefs}
            singleClickEdit={true}
           gridOptions={{
                stopEditingWhenCellsLoseFocus: true,
                rowSelection: {
                  mode: 'singleRow',
                  checkboxes: false,
                },
              }}
          />
        </Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={handleCloseModal}>
            Close
          </Button>
        </Modal.Footer>
      </Modal>
     
    </div>
  );
};
export default MyGridComponent;

The issue happens because the column has both cellRenderer and editable: true. When the checkbox is clicked, AG Grid enters edit mode, which interferes with the custom cell layout and causes misalignment or style issues.

To fix this, remove editable: true from the column definition and handle the value update manually inside the cellRenderer's onClick event. This way, the checkbox stays centered and the UI remains stable.