Attachment to a sharepoint list

Question

I am new to sharepoint and was trying to follow a thread SPFx uploading and adding attachment to a list in this forum to attach a file to a sharepoint List. However I am not able to attach the file to the list.

Here is my tsx part:

           <Label for="Documentation">
              <strong>Documentation</strong>
           </Label>
           <Input type="file" name="myfile" id="fileUploadInput" />
           <FormText>
              Please attach the documentation for your Best Practice.
           </FormText>

Here is my WEBPART TS;

            ReactDom.render(element, this.domElement);
            this.setButtonsEventHandlers();
            }

            private setButtonsEventHandlers(): void {
            let fileUpload = document.getElementById("fileUploadInput");
             if (fileUpload) {
             fileUpload.addEventListener("change", () => {
            this.uploadFiles(fileUpload);
           });
           }            
          }

         private async uploadFiles(fileUpload) {
         let file = fileUpload.files[0];
        //let attachmentsArray = this.state.attachmentsToUpload;
         let item = sp.web.lists
         .getByTitle("Best_Practice_Logging")
         .items.getById(15);
          item.attachmentFiles.add(file.name, file).then(v => {
          console.log(v);
          alert("File uploaded");
           });
         //let attachmentUpload = await _listItem.attachmentFiles.add(file.name,file)
           }