Insert People Picker into sharepoint online list

I have put the zip file from https://www.c-sharpcorner.com/article/pnp-people-picker-control-for-spfx/ into a webpart (after unzipping it). I'm trying to update my Sharepoint list.

With the PersonName field (Set as Person or Group in Sharepoint online) commented out it works. However when the PersonName field is not commented out it fails with this message. I followed the import instructions, but was wondering if my node modules directory is incorrect or if there is a difference between the Sharepoint used and my version of sharepoint online.

```

  @autobind 
 private addSelectedUsers(): void {  
 sp.web.lists.getByTitle("AlistairTest").items.add({
  Title: getGUID(),
  //With these lines commented out it works.  I changed the field name from User to PersonName when 
  //I created the column.
  PersonName: { 
      results: this.state.addUsers
  }
   }).then(i => {
    console.log(i);
   });
} 
```

Select allOpen in new window

Failed to load resource: the server responded with a status of 400 () [https://bhfonline.sharepoint.com/teams-and-projects/dev/halperna/_api/web/lists/getByTitle('AlistairTest')/items] Error: Error making HttpClient request in queryable [400] ::> {"odata.error":{"code":"-1, Microsoft.SharePoint.Client.InvalidClientQueryException","message":{"lang":"en-US","value":"A node of type 'PrimitiveValue' was read from the JSON reader when trying to read the entries of a feed. A 'StartObject' or 'EndArray' node was expected."}}} at new HttpRequestError (d:\spfx-pnp-people-picker\dist\pn-p-people-picker-web-part.js:2364:29) at d:\spfx-pnp-people-picker\dist\pn-p-people-picker-web-part.js:2373:21