This literally drove me insane about 2 months ago. So basically, there are 2 approaches here:

1. Have a backend that you'd send values to, and it would fill out the PDF, upload it somewhere and send you a link. Or just send you the file itself as a blob. (fail-safe if all the other solutions fail. Way more robust from my experience)
2. What you're looking for-- a frontend solution that would take user input, fill out a PDF template that you prepared beforehand.

I implemented both, but since you're more interested in option 2, here's how I did it:

I used this package

https://github.com/phihag/pdfform.js/blob/master/README.md

Alongside with a PDF form template. The way I filled it out was by passing an array of values that match up the PRF form's fields names!

Like this:

let filledPdf = pdfform().transform(arrayBuffer, {"field1Name":[field1Value],"field2Name" : [field2Value]  })
                const blob = new Blob([filledPdf], {type: "application/pdf"});

            setBlobContents(blob);

            pdfFile = blob;

            setBlobLink(URL.createObjectURL(blob))

It should be straight forward if you look at the documentation of the link I provided.