LWC not creating record on click of a button

My requirement is something like this:

1. There is a create account button which creates a new account based on 'Name' input field in the lightning card.
2. Once I click on this button, another button to create child contact appears, which when clicked, presents me with a list of input fields and a save contact button.

My account is getting created, but for some reason, the contact is not. Can you please help me to identify the mistake? I am still in a very beginner phase of LWC.

Thanks

<template>
<lightning-card title="Create Account">
    <lightning-input
            label="Name"
            onchange={handleNameChange}
            class="slds-var-m-bottom_x-small">
    </lightning-input>

    <lightning-button label="New Account" onclick={handleNewAccount}></lightning-button>
    <template if:true={showChildButton}>
        <lightning-button label="New Contact" onclick={handleNewContact}></lightning-button>
    </template>
</lightning-card>
<template if:true={showContactForm}>
    <lightning-card title="New Contact">
        <div class="slds-m-around_medium">
            <lightning-input label="First Name" value={contactFields.FirstName} onchange={handleFieldChange}></lightning-input>
            <lightning-input label="Last Name" value={contactFields.LastName} onchange={handleFieldChange}></lightning-input>
            <lightning-input label="Email" type="email" value={contactFields.Email} onchange={handleFieldChange}></lightning-input>
        </div>
        <div class="slds-m-around_medium">
            <lightning-button label="Save" onclick={handleSaveContact}></lightning-button>
        </div>
    </lightning-card>
</template>

import { LightningElement, track, api } from 'lwc';
import { createRecord } from 'lightning/uiRecordApi';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

import ACCOUNT_OBJECT from '@salesforce/schema/Account';
import NAME_FIELD from '@salesforce/schema/Account.Name';
import CONTACT_OBJECT from '@salesforce/schema/Contact';

export default class AccountCreation extends LightningElement {

    name='';

    @track showChildButton = false;
    @track showContactForm = false;
    @api accountId;
    @track contactFields = { AccountId: '', FirstName: '', LastName: '', Email: '' };

    handleNameChange(event) {
       // this.accountId = undefined;
        this.name = event.target.value;
    }

    handleNewAccount() {
        const fields = {};
        fields[NAME_FIELD.fieldApiName] = this.name;
        const recordInput = { apiName: ACCOUNT_OBJECT.objectApiName, fields };
        createRecord(recordInput)
            .then(account => {
                this.accountId = account.id;
                this.showChildButton = true;

                const toastEvent = new ShowToastEvent({
                    title: 'Success!',
                    message: 'New account record created',
                    variant: 'success'
                });
                this.dispatchEvent(toastEvent);
            })
            .catch(error => {
                console.error(error);
            });
    }

    handleNewContact() {
        this.contactFields.AccountId = this.accountId;
        this.showContactForm = true;
    }

    handleFieldChange(event) {
        //const field = event.target.label;
        //const value = event.target.value;
        //this.contactFields[field] = value;

        this.contactId = undefined;

        if (event.target.label==='First Name')
        {
            this.contactFields.FirstName= event.target.value;
        }

        else if (event.target.label==='Last Name')
        {
            this.contactFields.LastName = event.target.value;
        }

        else if (event.target.label==='Email')
        {
            this.contactFields.Email = event.target.value;
        }
    }

    handleSaveContact() {
        const fieldsContact = this.contactFields;
        const recordInput = { apiName: CONTACT_OBJECT.objectApiName, fieldsContact };
        createRecord(recordInput)
            .then(contact => {
                this.contactId = contact.id;
                //console.log(contact);
                this.showContactForm = false;

                const toastEvent = new ShowToastEvent({
                    title: 'Success!',
                    message: 'New contact record created',
                    variant: 'success'
                });
                this.dispatchEvent(toastEvent);

            })
            .catch(error => {
                console.error(error);
            });
    }
}