How would I display the Title of each People Picker in this list

Question

I have an SPFX webpart which, when started, it retrieves a list of items from an SPO list and displays them:

const Owner = item.OwnerId;
var itemOwner = sp.web.getUserById(Owner).select("Title", "Owner/Title").expand("Owner").get().then(r => {
            console.log(r, 'r');
          }); //this successfully retrieves the title for each item, 
but how would I implement it into the repeated list below in replacement of item.OwnerId?

 return (
   <div>
       <tr>
        <td style={{ width: '80px' }}>{item.Created}</td>
        <td style={{ width: '100px' }}>{item.OwnerId}</td>
        <td style={{ width: '100px' }}>{item.FormStatus}</td>
        <td style={{ width: '15px' }}>
        <div className={styles.editIcon}><Icon iconName="Edit" id={item.Id.toString()} onClick={this._editItem} />
       </div>
      </td>
     </tr>
   </div>
  );

I want to show the Title of the Owner column not the Id. So, I can retrieve the Id of the Owner column from the SPO list and it will show in the list of items successfully, but I cannot understand how I would expand the Owner column to show the Title of the Owner. You can see above how I have attempted it. But it shows an error.

My data model and interface for the retrieval of the list:

export interface IEIAItem {
....
    Owner: string;
    OwnerId: any;
....
}

export class EIAItem implements IEIAItem {
....
    public Owner: string;
    public OwnerId: any;

....   
    constructor(item: IEIAItem){
....
        this.Owner=item.Owner;
        this.OwnerId=item.OwnerId;
....
    }
}

Answer 1

I understand owner is a single people column in your list. You can directly fetch it through the list item:

const items = await sp.web.lists.getByTitle("LookupList").items.select("Created", "Lookup/Title", "Lookup/ID").expand("Lookup").get();

There is no need to send a second request to user resource. The above request will return the view field you specified.

Test: