Getting error 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.

Line 18:4: ‘output1’ is not defined no-undef Line 20:13:
‘output4’ is not defined no-undef Line 23:13: ‘output7’ is not
defined no-undef Line 25:13: ‘e’ is not defined no-undef
Line 26:11: ‘model’ is not defined no-undef Line 26:17: ‘e’ is
not defined no-undef Line 26:27: ‘e’ is not defined
no-undef Line 37:45: ‘model’ is not defined no-undef

I don’t understand How to handle this Problem Can anyone Please help me with this.
This is my 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 = "";
    output1 = document.querySelector("#Model").value;

    output4 = document.querySelector("#Voltage").value;

    output7 = document.getElementById("unit").value;

    e = document.querySelector("#Model");
    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++) {
          value = ("000" + i).slice(-4);
          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={{ position: "center" }}>
            <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 onclick={getOption()}>Generate</button>
              </p>
            </div>
          </fieldset>
        </section>
      </main>
    </>
  );
}

export default App;