Create legends split panels Google earth engine

I’ve got a problem regarding checkboxes (or widgets, generally) and split panel. I created a split panels that allows users to see two images simultaneously for comparisons…one image for any panel (left panel and right panel). Also, I created another one panel on the right part of the map with a gradient colours legend with values from 0 to 1 etc…

So, with the following code:

var palettes = require('users/gena/packages:palettes');
var Vis = palettes.colorbrewer.RdYlGn[11].reverse();

exports.splitt=function(images){var colorizedVis = {
  min: 0.0,
  max: 1.0,
  palette: Vis,
};

// Create the left map, and have it display layer 0.
var leftMap = ui.Map();
leftMap.add(createLegend())
leftMap.setControlVisibility(true);
var leftSelector = addLayerSelector(leftMap, 0, 'top-left');
//Map.addLayer(leftMap, viz);

// Create the right map, and have it display layer 1.
var rightMap = ui.Map();
rightMap.add(createLegend())
rightMap.setControlVisibility(true);
var rightSelector = addLayerSelector(rightMap, 1, 'top-right');

var checkbox = ui.Checkbox('Activate/Deactivate Split Panel', false);
checkbox.onChange(function(checked) {
  if (checked) {
    ui.root.widgets().reset([leftMap]);
  } else {
    ui.root.widgets().reset([splitPanel]);
  }
});
print(checkbox)

// Adds a layer selection widget to the given map, to allow users to change
// which image is displayed in the associated map.
  function addLayerSelector(mapToChange, defaultValue, position) {
  var label = ui.Label('Choose an image to visualize');

  // This function changes the given map to show the selected image.
  function updateMap(selection) {
    var heightLab = ui.Label({value:'Susceptibility Scale',
    style: {fontWeight: 'bold', fontSize: '16px', margin: '10px 5px'}
    });
    
    mapToChange.layers().set(0, ui.Map.Layer(images[selection],colorizedVis));
  }

  // Configure a selection dropdown to allow the user to choose between images,
  // and set the map to update when a user makes a selection.
  var select = ui.Select({items: Object.keys(images), onChange: updateMap});
  select.setValue(Object.keys(images)[defaultValue], true);

  var controlPanel =
      ui.Panel({widgets: [label, select, ], style: {position: position}});
  mapToChange.add(controlPanel);
}

//create the first panel 
function createLegend() {
    var legend = ui.Panel({
    style: {
      position: 'bottom-right',
      padding: '8px 15px'
    },
    layout: ui.Panel.Layout.flow('horizontal')
  })

  // Create legend title
 var legendTitle = ui.Label({
    value: 'Susceptibility',
    style: {
      fontWeight: 'bold',
      fontSize: '10px',
      margin: '0 0 4px 0',
      padding: '0'
      }
  });

  // Add the title to the panel
  legend.add(legendTitle); 

  // create text on top of legend
  var min = colorizedVis.min;
  var max = colorizedVis.max
  
  var panel = ui.Panel({
      widgets: [
                ui.Label(min,{fontSize: '10px',textAlign: 'center'/*, stretch: 'horizontal'*/})
                ],
  layout: ui.Panel.Layout.flow('horizontal')
});
  legend.add(panel);
  
  var lon = ee.Image.pixelLonLat().select('longitude');
  var gradient = lon.multiply((colorizedVis.max-colorizedVis.min)/100.0)
  .add(colorizedVis.min);
  var legendImage = gradient.visualize(colorizedVis);
  var thumbnail = ui.Thumbnail({
    image: legendImage,
    params: {bbox:'0,0,100,10', dimensions:'180x10'}});
  thumbnail.style().set({padding: '1px', position: 'bottom-center', stretch: 'horizontal'});

  // add the thumbnail to the legend
  legend.add(thumbnail);
  
 var panel = ui.Panel({
      widgets: [
                ui.Label(max,{fontSize: '10px',textAlign: 'center', stretch: 'horizontal'})
                ],
  layout: ui.Panel.Layout.flow('horizontal')
});
  legend.add(panel);

  return legend
}

// Create a SplitPanel to hold the adjacent, linked maps.
var splitPanel = ui.SplitPanel({
  firstPanel: leftMap,
  secondPanel: rightMap,
  wipe: true,
  style: {stretch: 'both'}
})

// Set the SplitPanel as the only thing in the UI root.
ui.root.widgets().reset([splitPanel]);
var linker = ui.Map.Linker([leftMap, rightMap]);
leftMap.setCenter(13.1, 37.72604, 12);
}```

Is possible to show any image (for example 'true/false' image) and their image singularly?
I mean: if I wanted to show only one of the three images with its legend, using a checkbox or any kind of widget...What should I do? I tried using checkboxes but I still don't understand where/when I'm wrong.