DOM Select. How to hide the list elements until an selectIndex is selected

I am writing a DOM select element program that creates a radio button that reveals a list of States in the USA.

This is how a part of the program looks:

The result of the program should create a button with the United States label attached to it. When I click on the button, a short list of the different American States should appear.
One problem is that the select list already shows after the program is executed. It’s supposed to be hidden at the beginning and the list should only appear when I click on the United States button.
enter image description here

I’m wondering how I can fix this.
Also, in an example that I looked at, it’s suggested to apply the global variable – var selectShowing = false; to the function to prevent the list of states from appearing immediately when the program is run.
Thanks in at advance and I appreciate your suggestions.

var states = new Array(2); 
states[0] = new Array("Alabama", "Alaska", "Arizona", "Arkansas", "California", "Colorado", "Connecticut", "Delaware", "Florida", "Georgia", "Idaho", "Illinois"); 
states[1] = new Array("AL", "AK", "AZ", "AR", "CA", "CO", "CT", "DE", "FL", "GA", "ID", "IL");
    
function createSelect(divId, statesArray) {
    var mySelect = document.createElement("SELECT"); 
    mySelect.setAttribute("name", "states"); 
    mySelect.setAttribute("id", "states"); 
    var newOption;
    var newTextNode; 
    for (i = 0; i < statesArray[0].length; i++) {
        //create the new option
        newOption = document.createElement("OPTION"); 
        //set the value of the new option. values are for states[1]
        newOption.setAttribute("value", statesArray[1][i]); 
        //make a new text node - that's the text that appears between the opening and closing option tags
        //it is what you see in the pulldown menu list
        //text node items are in states[0]
        newTextNode = document.createTextNode(statesArray[0][i]);
        //append the text node to the option
        newOption.appendChild(newTextNode); 
        //append the option to the select
        mySelect.appendChild(newOption); 
    }
    document.getElementById(divId).appendChild(mySelect);
}
<div id="selectDiv"></div>
    <p><label><input type="radio" value="createSelect('selectDiv', states);" onclick="createSelect('selectDiv', states);" />United States</label></p>
  
<select name="state" id="state">
    <option value="AL">Alabama</option>
    <option value="AK">Alaska</option>
    <option value="AZ">Arizona</option>
    <option value="AR">Arkansas</option>
    <option value="CA">California</option>
    <option value="CO">Colorado</option>
    <option value="CT">Connecticut</option>
    <option value="DE">Delaware</option>
    <option value="FL">Florida</option>
    <option value="GA">Georgia</option>
    <option value="ID">Idaho</option>
    <option value="IL">Illinois</option>
</select>