LWC Inside Flow with Custom Footer

Let’s create a LWC component first-

contactInfoFlowLWC.html

<template>
    <lightning-record-edit-form object-api-name="Contact" onsuccess={handleSuccess}>
        <lightning-messages> </lightning-messages>
        <lightning-input-field field-name="AccountId"></lightning-input-field>
        <lightning-input-field field-name="FirstName"> </lightning-input-field>
        <lightning-input-field field-name="LastName"> </lightning-input-field>
        <lightning-input-field field-name="Email"> </lightning-input-field>
        <footer class="slds-modal__footer">
            <lightning-button class="slds-m-top_small" variant="brand" type="submit" name="update" label="Submit">
            </lightning-button>
            <lightning-button class="slds-m-top_small" onclick={handleNext} name="nextScreen" label="Next">
            </lightning-button>
        </footer>
    </lightning-record-edit-form>
</template>

contactInfoFlowLWC.js

import { LightningElement, api } from 'lwc';
import { FlowNavigationNextEvent } from 'lightning/flowSupport';
import { NavigationMixin } from 'lightning/navigation';
export default class ContactInfoFlowLWC extends NavigationMixin(LightningElement) {
    @api contactId;
    @api availableActions = [];
    handleSuccess(event) {
        this.contactId = event.detail.id;
        this.NavigateToRecord();
    }
		
		//go to next component in flow
    handleNext() {
        const nextNavigationEvent = new FlowNavigationNextEvent();
				this.dispatchEvent(nextNavigationEvent);
    }

    NavigateToRecord() {
        this[NavigationMixin.Navigate]({
            type: 'standard__recordPage',
            attributes: {
                recordId: this.contactId,
                objectApiName: 'Contact',
                actionName: 'view'
            }
        });
    }
}

contactInfoFlowLWC.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>52.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__FlowScreen</target>
    </targets>
</LightningComponentBundle>

Now lets create a flow & use lightning component inside it-