Getting error(White Screen) While Printing the value of Select box in console with ReactJS

Hello i am new in ReactJS and I was making a Serial number generator which use the value of Select box and print that whole value in console in this code I Was trying to take the value of "Model" + then the value of "voltage" + unit + the last two digit of year + 000 + and in the last if the same two model is present so the last number will be 3 While running the code i got this error. This screen i get after running the code

and here is my full code:-

import React from 'react'
import './App.css';
import firebase from './firebase'
// import { getDatabase, ref, child, get } from "firebase/database";

function App() {

  var app=firebase.database();
var deviceref = app.ref('/');

  let serial=""
    
        function getOption() {
            serial=""
    var output1 = document.querySelector('#Model').value;               
          var  output4 = document.querySelector('#Voltage').valu 
          var  output7 = document.getElementById('unit').value;
          var  e = document.querySelector('#Model')
        var  model=e.options[e.selectedIndex].text;
    

            var myDate = new Date();
  var year = myDate.getFullYear();
  var twoDigitYear = year.toString().substr(-2);
  console.log(twoDigitYear)

    deviceref.orderByChild("Model").equalTo(model).once("value", function(snapshot){
    console.log(snapshot.val())

    var text=""
    var machines= snapshot.val()
    
    if(machines== null)
    {
      var len = 0
    }
    else{
      var len = Object.keys(machines).length

    }
    
    let max= parseInt(len) + parseInt(output7);
    for(var i=len +1; i<=max;i++)
    {
     
    var  value=('000' + i).slice(-4);
    var  serial = output1+output4+twoDigitYear+value;

     console.log(serial)

     app.ref(serial).set({
   
      Model:model
      
});         
     text += serial + "<br>";}
     document.getElementById("output").innerHTML = text;
    })
    alert('Serail No. Generated Successfully ')
    console.log('Serail No. Generated Successfully');

  }
  
   return (
    <>
    <main>
    <section class="container serial-container">
      <img src="assets/images/55k-logo.png" alt="logo" />
      <br/>
    <fieldset style= >

<div id="generator">

<b>
Generate Unique Serial No. For New Machines
</b> <br/><br/>

<p>
Model:
<select id="Model" >
  <option >--</option>
  
        <option value="07D092">POD +</option>
        <option value="15012">36K-wide</option>
        <option value="18011">55K-wide</option>
        <option value="19011">Agri </option>
        <option value="19D011">55k plus</option>
        <option value="20051">180K</option>
        <option value="04081">365K</option>
        <option value="07092">07M</option>
        <option value="21051">Air to Water Rig

            
        </option>
        
</select>
</p>


<p>
Voltage:
<select id="Voltage">
    <option >--</option>
    <option value="1">220V,50Hz,single phase</option>
    <option value="2">220V,60Hz,single phase </option>
    <option value="3">440V,50/60Hz,three phase </option>
    </select>
</p>
<p>
Quantity:
<input type='text' id="unit" />

</p>

Generated Unique Serial Numbers are:
<p id="output">

</p>
<p>
{/* <button >
        Generate
    </button> */}
<button onclick={getOption()}>
        Generate
    </button>
    


    </p>
    
    
    </div>
</fieldset>
</section>
</main>
<p>
    Clink the link for Customized Machines:<a href="serial_CUS.html" target="_blank">Customized Serial Number Generation Form</a>
</p>

</>
  );
}
// }

export default App;