Success Message with Toast events not working

Question

Js code

import { LightningElement, api, track } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';
import {FlowNavigationNextEvent, FlowAttributeChangeEvent} from 
"lightning/flowSupport";
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
export default class inputRows extends NavigationMixin(LightningElement) {

@api opportunityId;
@api buyerId;
@api buyers = [];
@api availableActions = [];
@api itemList = [];



keyIndex = 0;


@track itemList = [
    {
        row: 0,
    }
];

addRow(event) {
    ++this.keyIndex;
    let randomId = event.detail.id;
    var newItem = [{ row: this.keyIndex}];
    this.itemList = this.itemList.concat(newItem);
}

removeRow(event) {
    if (this.itemList.length >= 2) {
        this.itemList = this.itemList.filter(function (element) {
            return parseInt(element.id) !== parseInt(event.target.accessKey);
        });
    }
}


handleSubmit() {
    var isVal = true;
    this.template.querySelectorAll('lightning-input-field').forEach(element => {
        isVal = isVal && element.reportValidity();
        console.log("this.itemList:" + JSON.stringify(this.itemList));
    });
    if (isVal) {
        this.template.querySelectorAll('lightning-record-edit-form').forEach(element => {
            element.submit();
        });
    } 
    this.showToast();

}

showToast() {
    const event = new ShowToastEvent({
        title: 'Buyers',
        message: 'Buyers created successfully',
        variant: 'success'
    });
    this.dispatchEvent(event);
}

handleSuccess(event) {
    this.buyerId = event.detail.id;
    this.buyers.push(this.buyerId);

   console.log("buyers:" + this.buyers);

  this.dispatchEvent(new CustomEvent('buyerschange', {
    detail: { itemList: this.itemList}
})); 

}

}

HTML code

<template>
<lightning-card>
    <h3 slot="title">
        <lightning-icon icon-name="standard:timesheet" alternative-text="Event" size="small"></lightning-icon>
        &nbsp;Multiple Buyers Creation
    </h3>
    <template for:each={itemList} for:item="item" for:index="index">
        <lightning-record-edit-form key={item.id} object-api-name="Buyer__c" onsuccess={handleSuccess}>
            <lightning-messages> </lightning-messages>
            <lightning-layout multiple-rows>
                <lightning-layout-item size="12" small-device-size="6" medium-device-size="4" large-device-size="2"
                    padding="around-small">
                    <lightning-input-field field-name="Account__c" name="Account" data-id={item.id} variant="label-stacked" required>
                    </lightning-input-field>
                </lightning-layout-item>
                <lightning-layout-item size="12" small-device-size="6" medium-device-size="4" large-device-size="2"
                    padding="around-small">
                    <lightning-input-field field-name="Buyer_Percentage__c" name="Percentage" data-id={item.id} variant="label-stacked" required> 
                    </lightning-input-field>
                </lightning-layout-item>    
                <lightning-layout-item size="12" small-device-size="6" medium-device-size="4" large-device-size="2"
                    padding="around-small">
                    <lightning-input-field field-name="Opportunity__c" variant="label-stacked" value={opportunityId} disabled>
                    </lightning-input-field> 
                </lightning-layout-item>        
               <lightning-layout-item size="12" small-device-size="6" medium-device-size="4" large-device-size="2"
                    padding="around-small">
                    <div class="slds-p-top_medium">
                        <lightning-icon icon-name="action:new" access-key={item.id} id={index}
                            alternative-text="Add Row" size="small" title="Add Row" onclick={addRow}>
                        </lightning-icon>
                        <lightning-icon icon-name="action:delete" access-key={item.id} id={index}
                            alternative-text="Delete Row" size="small" title="Delete Row" onclick={removeRow}>
                        </lightning-icon>
                    </div>
                </lightning-layout-item>
            </lightning-layout>

        </lightning-record-edit-form>
    </template>
    </br>
    <lightning-layout>
        <div class="slds-align_absolute-center">
            <lightning-button variant="success" onclick={handleSubmit} name="submit" label="Submit">
            </lightning-button>
        </div>
    </lightning-layout>
</lightning-card>