Add people picker to sharepoint online web part - sharepoint

Question

I have this code and want to add the people picker from https://social.technet.microsoft.com/wiki/contents/articles/37728.sharepoint-online-step-by-step-client-side-people-picker-control.aspx#Full_Code
import { Version } from '#microsoft/sp-core-library';
import {
BaseClientSideWebPart,
IPropertyPaneConfiguration,
PropertyPaneTextField
} from '#microsoft/sp-webpart-base';
import { escape } from '#microsoft/sp-lodash-subset';
import styles from './FinanceSysAccWebPart.module.scss';
import * as strings from 'FinanceSysAccWebPartStrings';
import { SPHttpClient, SPHttpClientResponse } from '#microsoft/sp-http';
import { IListItem } from './app/interfaces/IListItem';
export interface IFinanceSysAccWebPartProps {
listName: string;
}
export interface ISpFxPureWebPartProps {
description: string;
}
export default class FinanceSysAccWebPart extends BaseClientSideWebPart<IFinanceSysAccWebPartProps>
{
private listItemEntityTypeName: string = undefined;
public render(): void {
this.domElement.innerHTML = `
<div class="${ styles.financeSysAcc }">
<div class="${ styles.container }">
<div class="${ styles.row }">
<div class="${ styles.column }">
<span class="${ styles.title }">Finance System Access Request Form</span>
<p class="${styles.description}">Name: ${escape(this.properties.listName)}</p>
<table>
<tr>
<td>First Name: </td>
<td><input id="txtFirstName" name="txtFirstName" type="text" /></td>
</tr>
<tr>
<td>Last Name: </td>
<td><input id="txtSurName" name="txtSurName" type="text" /></td>
</tr>
</table>
<div class="ms-Grid-row ms-bgColor-themeDark ms-fontColor-white ${styles.row}">
<div class="ms-Grid-col ms-u-lg10 ms-u-xl8 ms-u-xlPush2 ms-u-lgPush1">
<div class="status"></div>
<ul class="items"><ul>
</div>
</div>
</div>
</div>
</div>
</div>
`;
//let FirstName = (<HTMLInputElement> document.getElementById("txtFirstName")).value;
this.setButtonsEventHandlers();
}
What's the best way to do this? I can't see script tags in a webpart.

Answer 1

Use native JavaScript in SPFx solution would be more complex than classic page and no compile error/tip.
I would suggest you use #pnp/spfx-controls-react People Picker in your solution.
Demo thread