[SalesForce] lwc convert date from text to lightning-input of type date

I have a component which is displayed in a custom data table column for a text field having date value. By default text value dueDate along with Edit icon gets displayed. When the edit icon gets pressed, a popup is displayed with lightning-input component of type date along with save and cancel buttons. The need is to display the date in text in MM/DD/YYYY format in lightning-input component of type date properly. when i click edit the value displayed in lightning input is not correct. how can this be formatted correctly. Event the value selected in date picker needs to be formatted properly.

<template>
        <div
            class="cell slds-grid slds-grid_align-spread slds-grid_vertical-align-center"
            onmouseover={handleMouseOver}
            onmouseout={handleMouseOuts}
        >
            <div
                class="slds-truncate slds-p-left_x-small"
            >
                {dueDate}
            </div>
            <div class="slds-col cell-icon_wrapper slds-p-horizontal_x-small">
                <lightning-button-icon
                    icon-name="utility:edit"
                    variant="bare"
                    alternative-text="Edit"
                    size="small"
                    class="cell-icon__button_edit slds-hide"
                    onclick={handleEditClick}
                ></lightning-button-icon>
            </div>
        </div>
        <template if:true={isPopupOpen}>
            <section
                class="slds-popover slds-popover slds-popover_edit cell-popover_wrapper"
            >
                <div
                    class="slds-grid slds-wrap slds-popover__body cell-popover_body"
                >
                    <template if:true={isLoading}>
                        <lightning-spinner
                            alternative-text="Loading"
                            size="small"
                        ></lightning-spinner>
                    </template>

                    <div class="slds-col slds-size_12-of-12 slds-align-top">
                        <div class="slds-form-element slds-grid slds-wrap">
                            <lightning-input
                            value={dueDate}
                            type="date"
                            label="Due Date"
                            variant="label-hidden"
                            class="slds-grow slds-p-left_small"
                            date-style="short"
                            required
                            placeholder={dateFormat}
                        ></lightning-input>
                        </div>
                    </div>
                    <div class="slds-col slds-size_12-of-12 slds-align-bottom">
                        <lightning-button
                            variant="brand"
                            label="Save"
                            title="Save"
                            class="slds-float_right"
                            onclick={handleSaveClick}
                        ></lightning-button>
                        <lightning-button
                            variant="neutral"
                            label="Cancel"
                            title="Cancel"
                            class="slds-float_right slds-p-right_xx-small"
                            onclick={handleCancelClick}
                        ></lightning-button>
                    </div>
                </div>
            </section>
        </template>
    </template>




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

import updateTask from '@salesforce/apex/TaskListViewsController.updateTask';

const dateTimeFormat = new Intl.DateTimeFormat('en');

export default class TaskListViews_Datatable_Cell_DueDate extends LightningElement {
    /** Field Name. */
    @api fieldName;

    /** Task Id. */
    @api taskId;

    /** Due Date. */
    @api dueDate;

    /** Should column be editable. */
    @api editable;

    @track isPopupOpen = false;
    @track isLoading = false;

    @track dateFormat = "MM/DD/YYYY";    

    /** Handles mouseover ovent on the cell. */
    handleMouseOver() {
        if (this.editable) {
            this.wrapperDiv.classList.toggle('cell-wrapper_focus');
            this.editIcon.classList.toggle('slds-hide');
        }
    }

    /** Handles mouseout event on the cell. */
    handleMouseOuts() {
        if (this.editable) {
            this.wrapperDiv.classList.toggle('cell-wrapper_focus');
            this.editIcon.classList.toggle('slds-hide');
        }
    }

    /** Handles edit click on the cell. */
    handleEditClick() {
        this.isPopupOpen = true;
    }

    /** Handles save click. */
    handleSaveClick() {
        const isInputValid = this.inputComponent.checkValidity();
        if (!isInputValid) {
            this.inputComponent.reportValidity();
            return;
        }

        const parsedDate = Date.parse(this.inputComponent.value); 

        // Clien-side check for date validity
        if (!parsedDate) {
            this.inputComponent.setCustomValidity('Invalid date format');
            this.inputComponent.reportValidity();
            return;
        }

        // Format Date Based on User's Locale
        this.formattedDate = dateTimeFormat.format(parsedDate);
        this.isLoading = true;

        updateTask({
            taskId: this.taskId,
            property: this.fieldName,
            value: this.formattedDate
        })
            .then(() => {
                this.showToast();
                this.fireCellUpdateEvent();
                this.isPopupOpen = false;
            })
            .catch(error => {
                this.inputComponent.setCustomValidity(error.body.message);
                this.inputComponent.reportValidity();
            })
            .finally(() => {
                this.isLoading = false;
            });
    }

    /** Creates event to "celludpate". */
    fireCellUpdateEvent() {
        const event = CustomEvent('cellupdate', {
            composed: true,
            bubbles: true,
            cancelable: true,
            detail: {
                fieldName: this.fieldName,
                id: this.taskId,
                newValue: this.formattedDate
            },
        });
        this.dispatchEvent(event);
    }

    /** Show success toast message. */
    showToast() {
        const event = new ShowToastEvent({
            title: 'Success',
            message: `Task's Due Date updated`,
            variant: 'success'
        });
        this.dispatchEvent(event);
    }

    /** Handles cancel buttton click. */
    handleCancelClick() {
        this.isPopupOpen = false;
    }

    /** @returns {LightningElement} Wrapper div. */
    get wrapperDiv() {
        return this.template.querySelector('.cell');
    }

    /** @returns {LightningElement} Edit icon. */
    get editIcon() {
        return this.template.querySelector('.cell-icon__button_edit');
    }

    /** @returns {LightningElement} Lookup component. */
    get inputComponent() {
        return this.template.querySelector('lightning-input');
    }
}