I wrote a spfx web part using sp-pnp-js to fetch items from a list, this is my query to the list:

public async getAgreements(): Promise<Agreement[]> {
    let select = '*';

    let Agreements: Agreement[] = [];

    const items = await sp.web.lists.getById('ID_OF_THE_LIST').items
      .select(select)
      .get();

    items.forEach(item => {
        Agreements.push({
            AgreementName: item.Title,
            CustomerAgreementNr: item.CustomerAgreementNr

        });
    });

    return new Promise<Agreement[]>(async(resolve) => {
        resolve(Agreements);
    });
  }

In the SharePoint list I changed the display name of the title column to AgreementName so when I want to render the list in the web part I use AgreementName. To render the list I am using ListView and IViewField and it looks like this:

export default class AgreementContainer extends React.Component<IAgreementContainerProps, IAgreementContainerState> {
constructor(props: IAgreementContainerProps) {
    super(props);

    this.state = {
        agreements: []
    }
};

private viewFields: IViewField[] = [
    {
        name: "AgreementName",
        linkPropertyName: "AgreementName.ServerRelativeUrl",
        displayName: "Agreement Name",
        maxWidth: 25,
        minWidth: 25,
        sorting: true,
        isResizable: true
      },
      {
        name: "CustomerAgreementNr",
        displayName: "Customer Agreement Nr",
        maxWidth: 4,
        isResizable: true
      }
]

public componentDidMount(): void {
    this.props.provider.getAgreements().then((agreements) => {
        this.setState({
            agreements: agreements
        });
    });
    
}

public render(): JSX.Element {
    console.log(this.state.agreements);
    return (
        <div className={ styles.agreementDatabase }>
        <ListView 
            items = {this.state.agreements}
            viewFields={this.viewFields}
        />
        </div>
      );
}

}

But the result for the AgreementName column is just an empty a-tag with a tabindex attribute:

<a tabindex="-1">Agreement</a>

I have tested with the internal name instead (Title) but the result is the same. How can I fetch the link in order to link the item name?

And a last question, there are date columns too in the list and when they gets rendered the date is in this format: 2019-03-26T13:00:00Z , is there a way to convert the date to a friendly format? something like 2019-03-26 ?

Best regards, Americo