Create custom path component using lightning web component

PathComponent.html

<template>
    <lightning-card  variant="Narrow" >
        <lightning-spinner alternative-text="Loading" size="small" if:true={isLoading}></lightning-spinner>
        <!--Display the button on the top-->
        <p slot="actions" if:true={isTop}>
            <lightning-button if:true={showButton} variant="brand" label={buttonLabel} title={buttonLabel} onclick={handleClick}></lightning-button>
        </p>
        <div class="slds-m-around_small" if:true={isTop}>
            <lightning-progress-indicator current-step={currentValue} type={pathType} has-error="false" variant="shaded">
                <template if:true={pathValues} for:each={pathValues} for:item="step" for:index="index">
                    <lightning-progress-step data-index={index} data-value={step.value}
                        onclick={handleSelectChange} key={step.value} label={step.label}
                        value={step.value}>
                    </lightning-progress-step>
                </template>
            </lightning-progress-indicator>
        </div>
        <!--Display the button in the same row-->
        <lightning-layout multiple-rows if:false={isTop}>
            <lightning-layout-item size="12" padding="around-small" small-device-size="3" medium-device-size="6" large-device-size="10" >
                <lightning-progress-indicator current-step={currentValue} type={pathType} has-error="true" variant="base">
                    <template if:true={pathValues} for:each={pathValues} for:item="step" for:index="index">
                        <lightning-progress-step data-index={index} data-value={step.value}
                            onchange={handleSelectChange} onclick={handleSelectChange}
                            onselect={handleSelectChange} key={step.value} label={step.label}
                            value={step.value}>
                        </lightning-progress-step>
                    </template>
                </lightning-progress-indicator>
            </lightning-layout-item>
            <lightning-layout-item size="12" padding="around-small" small-device-size="2" medium-device-size="2" large-device-size="2">
                <lightning-button if:true={showButton} variant="brand" label={buttonLabel} title={buttonLabel} onclick={handleClick}></lightning-button>
            </lightning-layout-item>
        </lightning-layout>
    </lightning-card>
</template>

PathComponent.js

import { api, LightningElement, track, wire } from 'lwc';
import { getRecord, getFieldValue, updateRecord } from 'lightning/uiRecordApi';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { getPicklistValuesByRecordType, getObjectInfo } from 'lightning/uiObjectInfoApi';

const fields = [];
var DUMMY_RECORDTYPE_ID = '012000000000000AAA';

export default class PathComponent extends LightningElement {

    @api recordId; /* Id the record */
    @api objectApiName; /* object api name. For example, Account, Invoice__c */
    @api fieldApiName; /* field api name. For example, Rating, Status__c */
    @api values; /* picklist values comma separated if the values are not part of picklist field */
    @api currentValue; /* current value of the field */
    @api pathType; /* type of the path. For base, path */
    @api buttonLocation; /* location of the button. For top, same row */
    @api buttonLabel = 'Update Current Value'; /* label of the button */
    @api showButton = false;
    @api recordTypeName; /* record type name */

    @track pathValues = [];
    isLoading = false;
    isTop = false;
    errorMessage;
    isError = false;

    recordTypeId;

    connectedCallback() {
        if(this.buttonLocation === 'Top'){
            this.isTop = true;
        }else{
            this.isTop = false;
        }
        fields.push(this.objectApiName+'.'+this.fieldApiName);
        if(this.recordTypeName){
            fields.push(this.objectApiName+'.RecordTypeId');
        }
        if(this.values){
            let allValues = this.values.split(',');
            for(let i=0; i<allValues.length; i++){
                this.pathValues.push({
                    label : allValues[i],
                    value : allValues[i]
                });
            }
        }else{
            //this.handlePicklistValues();
        }
    }

    /* get the current value for the piklist field */
    @wire(getRecord, { recordId: '$recordId', fields })
    getfieldValue({error, data}){

        if(data){
            let fieldValue    = getFieldValue(data, this.objectApiName+'.'+this.fieldApiName);
            this.recordTypeId = getFieldValue(data, this.objectApiName+'.RecordTypeId');
            if(!this.currentValue){
                this.currentValue = fieldValue;
            }
            if(this.recordTypeId){
                //DUMMY_RECORDTYPE_ID = this.recordTypeId;
            }else{
                this.recordTypeId = DUMMY_RECORDTYPE_ID;
            }

        }else if(error){
            this.isError = true;
            this.errorMessage = error.body.message;
        }
    }

    @wire(getPicklistValuesByRecordType, { objectApiName: '$objectApiName', recordTypeId: '$recordTypeId' })
    fetchValues({error, data}){
        if(data && data.picklistFieldValues){
            try{
                if(!this.values){ // check if the values are not there then add the values to the picklist
                    let allValues = data.picklistFieldValues[this.fieldApiName];
                    this.pathValues = [];
                    allValues.values.forEach(option  => {
                        this.pathValues.push({
                            label : option.label,
                            value : option.value
                        });
                    });
                }
            }catch(err){
                this.isError = true;
                this.errorMessage = err.message;
            }
        }else if(error){
            this.isError = true;
            this.errorMessage = 'Object is not configured properly please check';
        }
    }

    handleSelectChange(event){
        event.preventDefault();
        this.currentValue = event.target.value;
        if(!this.showButton){
            const changeEvent = new CustomEvent('change', {
                detail: {
                    value : this.currentValue
                }
            });
            this.dispatchEvent(changeEvent);
        }
    }

    handleClick(event){
        event.preventDefault();
        this.isLoading = true;
        const fields = {};
        fields['Id'] = this.recordId; //ID_FIELD.fieldApiName
        fields[this.fieldApiName] = this.currentValue; // STAGENAME_FIELD.fieldApiName
        const recordInput = { fields };
        updateRecord(recordInput)
        .then(() => {
            this.dispatchEvent(
                new ShowToastEvent({
                    title: 'Success',
                    message: 'Record updated',
                    variant: 'success'
                })
            );
        })
        .catch(error => {
            console.error(' Error updating record ', error);
            this.dispatchEvent(
                new ShowToastEvent({
                    title: 'Error updating record',
                    message: error.body.message,
                    variant: 'error'
                })
            );
        })
        .finally(() => {
            this.isLoading = false;
        });
    }
}

pathComponent.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>54.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>Path Component</masterLabel>
    <targets>
        <target>lightning__RecordPage</target>
        <target>lightning__FlowScreen</target>
    </targets>
    <!-- Configuring the design attributes -->
    <targetConfigs>
        <targetConfig targets="lightning__RecordPage, lightning__FlowScreen">
            <property name="recordId" type="String" label="Record Id" description="The Salesforce Object Record Id!"/>
            <property name="objectApiName" type="String" label="Object Api Name" description="Salesforce Object API Name"/>
            <property name="fieldApiName" type="String" label="Picklist Field API Name" description="Picklist Field API Name" />
            <property name="currentValue" type="String" label="The current picklist value!"
                description="The current picklist value!" />
            <property name="pathType" type="String" label="Type of the path."
                description="The type of path you wanted to show. Valid values are base, path" />
            <property name="values" type="String" label="The picklist field values"
                description="provide all the picklist api name comma separated"/>
            <property name="buttonLocation" type="String" label="Location of the button"
                description="Where you wanted to display the button. The valid values are Top, SameRow"/>
            <property name="buttonLabel" type="String" label="The Label of the button"
                description="The Label of the button. For Example, Mark as Current Status"/>
            <property name="recordTypeName" type="String" label="Name of the record type"
                description="Please provide the name of the record type if you are using record type name" />
            <property name="showButton" type="Boolean" label="Show Action Button?"
                description="Select True if you wanted to see the button, False if you do not wanted to show the action" />
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

The picklist value updates fine in the custom path only when directly updating the custom path. However, when updating the picklist value on the detail page, it fails to dynamically update in the custom path. and the picklist value in the custom path only updates after manual refresh.