When I change the stages of an opportunity automatically the substages should change without refreshing

Question

I have added substages for each stage of an opportunity and now it should change when each stage is changed.Performed using lwc:

My current code js:

import { LightningElement,api,wire,track } from 'lwc';
import getDependentPicklistValues from '@salesforce/apex/Pathcontroller.getDependentPicklistValues';
import { refreshApex } from '@salesforce/apex';
//import { getObjectInfo } from 'lightning/uiObjectInfoApi';
//import { getPicklistValues } from 'lightning/uiObjectInfoApi';
//import OPP_OBJECT from '@salesforce/schema/Opportunity';
//import RECORDTYPEID from '@salesforce/schema/Opportunity.RecordTypeId';
import Stage_FIELD from '@salesforce/schema/Opportunity.StageName';
export default class PathComponent_lwc extends LightningElement {
    @api recordId;
    @track mapOfValues =[];
    // @track opportunity = 'Opportunity';
    // @track substage = 'Sub_Stage__c';
       
    connectedCallback() {   
    }

    //console.log('substage',SubStage_FIELD);
    @wire(getDependentPicklistValues ,{ recrdId: '$recordId'})  
        mapOfData({data, error}) {
            console.log('stage5@@-->',Stage_FIELD);
            console.log('data--@@',data);
            this.mapOfValues = [];
            if(data) {
                console.log('testing');
                for(let key in data) {
                    // Preventing unexcepted data
                    if (data.hasOwnProperty(key)) { // Filtering the data in the loop
                        this.mapOfValues.push({value:data[key], key:key});      
                        return refreshApex(this.mapOfValues.push({value:data[key], key:key}));             
                    }
                }
                console.log('mapOfValues => ', JSON.stringify(this.mapOfValues));
            }
            else if(error) {
                window.console.log(error);
            }
        }  
    }

html:

<template>
    <lightning-progress-indicator current-step=" " type="path" variant="base"> 
        <!-- <lightning-card title="Get picklist values of Industry field" > -->
            <template for:each={mapOfValues} for:item="step">
                <lightning-progress-step label={step.value} value={step.value} key={step.key}></lightning-progress-step>
            </template>
        <!--  </lightning-card>  -->
    </lightning-progress-indicator>
</template>

In js I have added an apex refresh method but I have a doubt whether it works only while editing a page.Here I don't have to make any changes. So is this the right method or do I have to make changes? Similarly I have seen in aura component that we can use force:refresh. So should I create an aura component and embed it with lwc?

Here as seen in the image the first stage is prospecting with substages step 1 and step2. So when I mark prospecting as complete and move on to qualification the substages should change to those related to qualification automatically without refreshing.