How to use the @lumino/datagrid.BasicKeyHandler function in @lumino/datagrid

let bgColorFloatRenderer = new TextRenderer({
    textColor: heatMapViridisInverse,
    backgroundColor: heatMapViridis,
    format: TextRenderer.formatFixed({ digits: 2 }),
    horizontalAlignment: 'right'
  });

  let grid1 = new DataGrid({ style: blueStripeStyle });
  grid1.dataModel = model1;
  grid1.keyHandler = new BasicKeyHandler();
  grid1.mouseHandler = new BasicMouseHandler();
  grid1.selectionModel = new BasicSelectionModel({ dataModel: model1 });

  let grid2 = new DataGrid({ style: brownStripeStyle });
  grid2.dataModel = model2;
  grid2.keyHandler = new BasicKeyHandler();
  grid2.mouseHandler = new BasicMouseHandler();
  grid2.selectionModel = new BasicSelectionModel({
    dataModel: model2,
    selectionMode: 'column'
  });

  let grid3 = new DataGrid({ stretchLastColumn: true });
  grid3.cellRenderers.update({ 'body': fgColorFloatRenderer });
  grid3.dataModel = model3;
  grid3.keyHandler = new BasicKeyHandler();
  grid3.mouseHandler = new BasicMouseHandler();
  grid3.selectionModel = new BasicSelectionModel({ dataModel: model3 });

  let grid4 = new DataGrid({ style: lightSelectionStyle });
  grid4.cellRenderers.update({ 'body': bgColorFloatRenderer });
  grid4.dataModel = model4;