Retrieve & Display 'Person or Group' type column in a List using SPFX

Question

I am trying to Get data from a Custom List & show it as a table using SPFX.
By Refering this Link, displayed Single line of text type columns.
But when trying to display Person or Group, particular column values are undefined in table in the Webpart.
I tried to change the column type from string to object in the ListModel, but no change in the result.

export interface ISPList {
  USERNAME: string;
  EMAIL: string;
  COUNTRY: string;
  USERROLE:Object;  //People and Groups type column
}

How can I retrieve & display Person or Group,Lookup these type of columns.
Thank you

Edit

By referring ashik answer, now my listmodel look like this,

export interface ISPList {
  USERNAME: string;
  EMAIL: string;
  COUNTRY: string;
  USERROLE:{
    Title:string
  }
}

and _renderList function is,

 private _renderList(items: ISPList[]): void {
    debugger;
    let html: string = '<table class="TFtable" border=1 width=100% style="border-collapse: collapse;">';
    html += `<th>UserName</th><th>Email</th><th>Country</th><th>UserRole Title</th>`;
    items.forEach((item: ISPList) => {
      html += `  
           <tr>  
          <td>${item.USERNAME}</td>  
          <td>${item.EMAIL}</td>  
          <td>${item.COUNTRY}</td>
          <td>${item.USERROLE[0].Title}</td> 
          </tr>  
          `;
    });
    html += `</table>`;
    const listContainer: Element = this.domElement.querySelector('#spListContainer');
    listContainer.innerHTML = html;
  }

But, how can I add 'Person or Group' field to my _getMockListData function which is like below,

  private _getMockListData(): Promise<ISPLists> {
    return MockHttpClient.get(this.context.pageContext.web.absoluteUrl).then(() => {
      const listData: ISPLists = {
        value:
          [
            { USERNAME: 'abc', EMAIL: '[email protected]', COUNTRY: 'IND' },
            { USERNAME: 'cdy', EMAIL: '[email protected]', COUNTRY: 'IG' },
            { USERNAME: 'pqr', EMAIL: '[email protected]', COUNTRY: 'IND' }
          ]
      };
      return listData;
    }) as Promise<ISPLists>;
  }

Answer 1

In the rest api url you should mention the people field in expand section

Eg:

private getPeopleFieldValues() : any {  
    return this.context.spHttpClient
      .get(`${this.context.pageContext.web.absoluteUrl}/_api/web/lists/getbytitle('ListName')/items?$select=*,PeopleFieldName/Title,PeopleFieldName/EMail&$expand=PeopleFieldName`},
      SPHttpClient.configurations.v1)
      .then((response: SPHttpClientResponse)=>{                   
          return response.json();
      });
  }

Now place the output in the console.log and find the path required to show the names of the people field values.

Hope it helps.