I am trying to pass values from HTML input into a JavaScript function and then to an apex controller to create a lead in salesforce

• HTML (here is where I am collecting the information on an experience builder page)

           <div class="slds-form-element__control ">
          <input type="text"
           id="firstName"
           placeholder="First Name"
           class="first_name_input slds-input"
            />                 
           </div>
  
           <div class="slds-form-element__control ">
           <input type="text"
            id="lastName"
            placeholder="Last Name"
            class="last_name_input slds-input"
            />     
  
           </div>
  
           <div class="slds-form-element__control ">
           <input type="text"
            id="email"
            placeholder="Email Address"
            class="email_input slds-input"
            />                 
           </div>
  

-JavaScript (the values are passed to java script where there are multiple functions, this is the function that is designed to pass the values to apex for lead creation)

createLead(firstName,lastName, email) {
            var firstName = firstName
            var lastName = lastName
            var email = email
            this.createOrObtainExistingLead()
            this.navigateToFAPage()
            }

-Apex(once values are passed to the apex controller the lead should be created with values passed from JavaScript)

public class VOQuickQuoteController {

@AuraEnabled
@future
public static void createOrObtainExistingLead(string firstName, string lastName, string email,) {    
    
    Lead l = new Lead(
        firstName=firstName,
        lastName=lastName,
        email=email,       
    );
    insert l;    
}    

}