javascript onchange not placing a correct value when form is submitted

I have a default input form having ID = Form_state, this javascript code is placing a select element on top of it. Its doing what its supposed to do but when I submit the form, the value is not submitted to Input #Form_St

It is showing the value on select, but when you inspect element the #Form_State no value is placed.

// Sample data for options
var stateOptions = [{
"AL":"Alabama",
"AK":"Alaska",
"AZ":"Arizona",
"AR":"Arkansas",
"CA":"California",
"CO":"Colorado",
"CT":"Connecticut",
"DC":"District of Columbia",
"DE":"Delaware",
"FL":"Florida",
"GA":"Georgia",
"HI":"Hawaii",
"ID":"Idaho",
"IL":"Illinois",
"IN":"Indiana",
"IA":"Iowa",
"KS":"Kansas",
"KY":"Kentucky",
"LA":"Louisiana",
"ME":"Maine",
"MD":"Maryland",
"MA":"Massachusetts",
"MI":"Michigan",
"MN":"Minnesota",
"MS":"Mississippi",
"MO":"Missouri",
"MT":"Montana",
"NE":"Nebraska",
"NV":"Nevada",
"NH":"New Hampshire",
"NJ":"New Jersey",
"NM":"New Mexico",
"NY":"New York",
"NC":"North Carolina",
"ND":"North Dakota",
"OH":"Ohio",
"OK":"Oklahoma",
"OR":"Oregon",
"PA":"Pennsylvania",
"RI":"Rhode Island",
"SC":"South Carolina",
"SD":"South Dakota",
"TN":"Tennessee",
"TX":"Texas",
"UT":"Utah",
"VT":"Vermont",
"VA":"Virginia",
"WA":"Washington",
"WV":"West Virginia",
"WI":"Wisconsin",
"WY":"Wyoming"
}];

// Function to create and insert the select element
function createSelectElement(options, insertBeforeId) {
    // Create select element
    var selectElement = document.createElement("select");
    selectElement.style.position = 'absolute';
    selectElement.style.top = '20px';
    selectElement.style.left = '0';
    selectElement.style.width = '100%';
    selectElement.style.height = '25px';
    selectElement.style.lineHeight = '20px';
    selectElement.style.margin = '0';
    selectElement.style.padding = '0';
    selectElement.style.border = '0';
    
    var selectedState = "document.getElementById('form_state').value=this.options[this.selectedIndex].text";

    selectElement.setAttribute("onchange", "document.getElementById('form_state').value=this.options[this.selectedIndex].text; "+selectedState+"; alert("+selectedState+");")

    selectElement.id = "stateSelect";

    // Iterate over options and create option elements
    options.forEach(function (state) {
        for (var key in state) {
            var option = document.createElement("option");
            option.value = key;
            option.text = state[key];
            selectElement.appendChild(option);
        }
    });

    // Find the element to insert before
    var insertBeforeElement = document.getElementById(insertBeforeId);

    // Insert the select element before the specified element
    insertBeforeElement.parentNode.insertBefore(selectElement, insertBeforeElement);
}

// Call the function to create and insert the select element
createSelectElement(stateOptions, "form_state");

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Select Element Example</title>
</head>
<body>

<!-- Your form elements -->
<select id="stateSelect" style="position:absolute;top: 21px;left: 0;width: 100%;height: 25px;line-height:20px;margin:0;padding:0;border: 0;" onchange="updateFormState()">
</select>

<input type="text" id="form_state" placeholder="Selected State">

</body>
</html>