3 gui.add() fns to make radio buttons: strange action

Questions
1

In a dat.gui area I want to give the user 3 mutually exclusive choices to apply a color to a cube. This is based on the following discussion in stackoverlfow:

This code presents 3 choices to apply a color to the material covering a cube. So very simple yet strange in practice. There are 3 gui.add statements and a function setChecked() implements a radio-button style exclusive selection then applies the choice of color to the cube.

Here’s the weird problem: the middle choice of the 3 gui.add statements never gets implemented after the setChecked() call in init(). It has nothing to do with what the specific element is in each statement – you can rearrange the A-B-C sequence and it is always the middle line’s color that is ignored.

gui = new( GUI );
  
  const pickOne = {
    A: false,
    B: false,
    C: false
  };
  
  gui.add( pickOne, 'A' ).name( 'Color A' ).listen().onChange(function(){ setChecked( 'A' )});
  gui.add( pickOne, 'B' ).name( 'Color B' ).listen().onChange(function(){ setChecked( 'B' )});
  gui.add( pickOne, 'C' ).name( 'Color C' ).listen().onChange(function(){ setChecked( 'C' )});

  function setChecked( colorChoice ) {

    // select color from GUI
    for ( let each in pickOne ){
      pickOne[ each ] = false;
    }
    pickOne[ colorChoice ] = true;

    // apply color to object
    if ( colorChoice === 'A')       { material.color.set( 0x44aa88 ); } 
    else if ( colorChoice === 'B' ) { material.color.set( 0xaa8844 ); } 
    else if ( colorChoice === 'C' ) { material.color.set( 0x8844aa ); }
  };
    
  setChecked( 'B' );    // initialize GUI
2

Hi!
I modified the example from SO: https://jsfiddle.net/prisoner849/ftvbhe9u/

3

Many thanks for you attention to my problem. I will apply your solution!