How onclick will work if the button on the parent lwc component and the lightning-record-edit-form is on the child lwc component?

Question

I have tried to create LWC's for a record creation/ Update like below.

Parent LWC component,

<template>
  <lightning-button variant="brand" label="Click Here" title="Primary action" onclick={handleClick} class="slds-m-left_x-small"></lightning-button>
  <c-object-type-selection></c-object-type-selection>
</template>

Parent LWC component JS.

import { LightningElement, api } from 'lwc';

export default class ParentSampleButton extends LightningElement {

  handleClick() {
    const typeSelection = this.template.querySelector('c-object-type-selection');
    typeSelection.show();
  }
}

object-type-selection component

<template>
  <template if:true={showModal}>
    <article class="slds-card">
      <div style="height: 1000px;">
        <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
          <div class="slds-modal__container">
            <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1" style="height: 640px;">
              <lightning-combobox
                name="Type"
                label="Type"
                value={type}
                placeholder={type}
                options={typeSelect}
                required="true"
                onchange={typeChange}>
              </lightning-combobox>
              <br/>
              <div>
                <template if:true={selected}>
                  <c-create-plan-object obj-type={value} parent-id={parentId} type={type} field-set-fields={retrievedFields} record-id={recordId} fields={fieldsToPass}></c-create-plan-object>
                </template>
              </div>
            </div>
            <footer class="slds-modal__footer">
              <button class="slds-button slds-button_brand" onclick={handleSubmit} disabled={hideButton}>Save</button>
            </footer>
          </div>
        </section>
      </div>
    </article>
  </template>
</template>

JS file

import { LightningElement, api } from 'lwc';
import { ShowToastEvent } from "lightning/platformShowToastEvent";

export default class ObjectTypeSelection extends LightningElement {

  retrievedFields; // fill from an apex call
  fieldsToPass;
  @api show() {
    this.showModal = true;
  }

  typeChange(event) {
   
  }

  handleSubmit(event) {
    event.preventDefault();
    this.fieldsToPass = event.detail.fields;
    console.log('AAAA ' + this.fieldsToPass);
    var component = this.template.querySelector('c-ppm-create-plan-object');
    component.handleSubmitChild();
  }
}

create-plan-object component

<template>
  <lightning-record-edit-form
    object-api-name={objType}
    <template for:each={fieldSetFields} for:item="fieldSetField">
      <lightning-input-field field-name={fieldSetField.apiname} key={fieldSetField.apiname} data-field={fieldSetField.apiname}>
      </lightning-input-field>
    </template>
  </lightning-record-edit-form>
</template>

JS file

import { LightningElement, api, wire } from 'lwc';

export default class CreatePlanObject extends LightningElement {

  @api fieldSetFields;
  @api fields;

  @api
  handleSubmitChild() {

    if(this.parentId == 'global') {
      if(this.objType == 'Portfolio__c') {
        fields.Portfolio__c = this.recordId;
      }
    }

    this.template.querySelector('lightning-record-edit-form').submit(fields);
  }
}

How we can get the lightning-record-edit-form to the parent object-type-selection component to submit via the save button which also exists on the parent object-type-selection component?