How to add a file upload button or general feature on spfx web part.

I've been looking for a simple way to add a file upload button or feature that allows the user to upload a doc to a list, (not a lib).

The problem is that most tutorials say how to upload to a doc lib not a list.

I am developing a web part form which allows the user to attach a doc to the form then submit it.

I've looked at the pnp/sp option but I don't understand how to use it.

https://github.com/SharePoint/PnP-JS-Core/wiki/Working-With:-Attachments

How would I use the code with a button to upload? Bearing in mind that the list item does not exist at this point! So there is no ID that the item can attach itself to.

I hope someone understands this!

UPDATE: Still haven't got it working! But I can retrieve the attachment of an already created item with an attachment using:

let item = pnp.sp.web.lists.getByTitle("MyList").items.getById(1);

// get all the attachments
item.attachmentFiles.get().then(v => {

    console.log(v);
});

If I wanted to submit an attachment, I would somehow need to store it in state, then use:

let item = pnp.sp.web.lists.getByTitle("MyList").items.getById(1);

item.attachmentFiles.add("file2.txt", "Here is my content").then(v => {

    console.log(v);
});

But I don't understand how I would store it in state (I guess an array?) then how would I pass it to:

item.attachmentFiles.add(state here?).then(v => {what here?}});

C