How to use pnp/spfx controls people picker with functional react and no this keyword in my sharepoint project?

Question

I need to use this pnp/spfx people picker in my functional based react project. https://pnp.github.io/sp-dev-fx-controls-react/controls/PeoplePicker/

But all of the tutorials and images across the web are explaining usage within a class based react setup. So I'm getting errors because of the this keyword.

So I was wondering if someone could explain to me exactly how to create a people picker using functional react and no this keyword because I am using function based react, and I don't know how to make the changes that will allow me to use the people picker in my react project without the use of 'this' and 'props'.

here's the code that I used on my page.

import { PeoplePicker, PrincipalType } from '@pnp/spfx-controls-react/lib/PeoplePicker'

import PnPTelemetry from '@pnp/telemetry-js'

  const telemetry = PnPTelemetry.getInstance()
  telemetry.optOut()

                    <PeoplePicker
                      context={props.context}
                      titleText="People Picker"
                      personSelectionLimit={3}
                      groupName={'Team Site Owners'} // Leave this blank in case you want to filter from all users
                      showtooltip={true}
                      required={true}
                      disabled={true}
                      onChange={this._getPeoplePickerItems}
                      showHiddenInUI={false}
                      principalTypes={[PrincipalType.User]}
                      resolveDelay={1000} />