Typescript React - Update array using form and PnPjs

I'm creating a SharePoint web app. I have around 100 products. Each product has about 30 elements which include the title, description, pictures, ratings, and etc. For the example below I'm only showing title and description to minimize code.

The goal is to when a admin goes to mysite.com/product/12 or mysite.com/product/64I want to create a form where they can update some values for that array. For example they can edit the description. Here are the three items I need help with.

1. I'm currently filtering the array to get the element by the id using this.props.match.params.id and then storing that new array in UserList. In my render I have in my form field I have value={this.state.UserList.ProductTitle} however, this is display nothing. How do I get the content of that element to display in the field value.

2. If any of the form fields have been changed I want to store that value to update the array on submit.

3. On form submit _onProductUpdate using Pnpjs update()function found here . I want to update that list element with any changes.

Here is where I'm at now.

import * as React from 'react';import { default as pnp, sp} from "sp-pnp-js";export class Product extends React.Component<{match: any}, {    UserList: any,    ProductTitle: string,    ProductDescription: string, }> {    constructor(props) {        super(props);        this.state = {            UserList: [],            ProductTitle: '',            ProductDescription: '',        };    }    handleChangeProductTitle(event) {        const { value } = event.target;        this.setState({ ProductTitle: value });     }    handleChangeProductDescription(event) {        const { value } = event.target;        this.setState({ ProductDescription: value });     }           public componentDidMount() {        pnp.sp.web.lists.getByTitle("Products").items.filter("Id eq '"+ this.props.match.params.id +"'").top(1).get().then((items: any[]) => {            console.log(items);             const UserList = items.map((item) => {                return {                    id: item.ID,                     ProductTitle: item.Title,                    ProductDescription: item.DetailedDescription,                }            });            console.log(UserList);            this.setState({ UserList: [...UserList] });        })    }    private _onProductUpdate(event) {         event.preventDefault();        let list = pnp.sp.web.lists.getByTitle("Products");        list.items.getById(this.state.UserList).update({            ProductTitle: this.state.UserList.ProductTitle,             ProductDescription: this.state.UserList.ProductDescription,        }).then(i => {            //console.log(i);        });    }  public render(): React.ReactElement<{}> {    return (<div> <h2>Single Product with ID: {this.props.match.params.id}</h2><form onSubmit={this._onProductUpdate}><div className={styles.halfColumn}><label>                    Request Title</label><input                    value={this.state.UserList.ProductTitle}                    onChange={this.handleChangeProductTitle}                    type="text"                    name="Product Title"                    maxLength={45}                /></div><div className={styles.halfColumn}><label>                    Detailed Description:</label><input                    value={this.state.UserList.ProductDescription}                    onChange={this.handleChangeProductDescription}                    type="text"                    name="Detailed Description:"                    maxLength={45}                /></div></form></div>    );  }}