Submitting a record to create using lwc record edit form

I have an object Foo__c that has MD relationship to Zoo__c object. I am trying to create Foo__c record using lightning-record-edit-form. This is for learning purpose. Below is my code:

HTML:

<template>
    <lightning-record-edit-form object-api-name="Foo__c" record-id={recordId} onsubmit={handleSubmit}
        onsuccess={handleSuccess}>
        <lightning-messages></lightning-messages>
        <lightning-input-field field-name="zoo__c" class="slds-form-element__label" variant="label-hidden">
        </lightning-input-field>
        <lightning-input-field label="Name" field-name="Name" class="slds-form-element__label">
        </lightning-input-field>
        <div class="slds-align_absolute-center" style="margin-top: 5px">
            <lightning-button type="submit" variant="brand" label="Submit" icon-name="utility:save"></lightning-button>
        </div>
    </lightning-record-edit-form>
</template>

JS:

import { LightningElement, api } from 'lwc';

export default class Recordeditform extends LightningElement {
    zooId;
    /** Pls ignore getter and setter here as it does not have any significance **/
    @api
    get recordId() {
        return this.zooId;
    }
    set recordId(value) {
        this.setAttribute('zooId', value);
        this.zooId = value;
    }

    handleSubmit(event) {
        event.preventDefault();
        const inputFields = this.template.querySelectorAll(
            'lightning-input-field'
        );

        if (inputFields) {
            inputFields.forEach(field => {
                console.log('Field is==> ' + field.fieldName);
                console.log('Field is==> ' + field.value);
            });
        }
        this.template.querySelector('lightning-record-edit-form').submit(inputFields);
    }

}

Console output:

I get this error, even though console show zoo__c field is populated.

What am I doing wrong here?

handleSubmit(event) {
    event.preventDefault();
    const inputFields = event.detail.fields;

    if (inputFields) {
        inputFields.forEach(field => {
            console.log('Field is==> ' + field.fieldName);
            console.log('Field is==> ' + field.value);
        });
    }
    this.template.querySelector('lightning-record-edit-form').submit(inputFields);
}