Upload file from local drive to SharePoint Online Document library React/Typescript Pnp

Question

I am trying to upload a file following this method:

Here is the code I am using:

const saveIntoSharePoint = async() => {

    let files : FileList | null = null;
    if((document.getElementById("iUpload") as HTMLInputElement) != null){
      files = (document.getElementById("iUpload") as HTMLInputElement).files
    }
    
    let file : File | null = null;

    if(files)
      file = files[0]
      
    let fileNamePath : string = "";
      if(file)
        fileNamePath = encodeURI(file.name);
        
    
    let result: IFileAddResult
    result = await sp.web.getFolderByServerRelativePath("Shared%20Documents").files.addUsingPath(fileNamePath, file != null ? file.name : "", {Overwrite: true});
    
    return result;
}

In my render:

<div>
      <input id="iUpload" name="iUpload" onChange={saveIntoSharePoint} type="file" accept = ".DOCX,.docx,.txt,.TXT,.PDF,.pdf" />  

Problem #1: When I run my code sp.web.getFolderByServerRelativePath("Shared%20Documents").files is undefined

Problem #2: I have no idea what to place in the second parameter to addUsingPath(fileNamePath, **file**). file is not accepted.

Can you please provide some insight on how to properly use this?