Need to create three dependent picklist of role hierarchy using lwc for each level of roles

Question

I am a newbie in LWC so I have to implement the dependent picklist on my custom object and this dependent picklist should be on UserRole along with the upto level 3, like :

3 levels of user role picklist fields to implement: - Level 1: CEO, VP, CTO, ... - Level 2 : (dependent on level 1): - level 3 :( dependent on level 2)

I have created only picklist for entire roles in the org using LWC and I am saving role name in custom field as a URL of role record and I need to do same with both dependent picklist values which means level2 and level3 should also map into two different custom fields as a URL, but I need to make changes according to my requirement. Please help me out. (https://i.stack.imgur.com/wx0y7.png)

<template>
    <lightning-card title="Display User Role" icon-name="standard:partner_fund_request">
    <div class="pickCls slds-m-top_medium">
        <lightning-combobox name="Role" label="Role Name" placeholder="Choose Role" value={value} onchange={handleChange} options={roleOptions}></lightning-combobox>
    </div>
    <div class="slds-m-top_medium btnCls">        
         <lightning-button class="btnCls1" label="Save" variant="brand" type="submit" onclick={handleSave} alignment-bump="right"></lightning-button>
    </div>
    </lightning-card>
</template>
import { LightningElement , wire, track,api} from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import getUserRoles from '@salesforce/apex/UserRoleController.getUserRoles';
import { updateRecord } from 'lightning/uiRecordApi';
import ID_FIELD from '@salesforce/schema/Invoice__c.Id'; 
import { RefreshEvent } from 'lightning/refresh';
import { NavigationMixin } from 'lightning/navigation';
import USER_ROLES_FIELD from '@salesforce/schema/Invoice__c.Role_link__c';
let i=0;
export default class DisplayUserRole extends LightningElement {
    @api recordId;
    @track items = []; //this will hold key, value pair
    @track value = ''; //initialize combo box value
    @track chosenValue = '';
    @wire(getUserRoles)
    wiredUserRoles({ error, data }) {
    if (data) {
        for(i=0; i<data.length; i++) {
        this.items = [...this.items ,{value: data[i].Id , label: data[i].Name} ];
    }
    this.error = undefined;
    } else if (error) {
        this.error = error;
    }
    }
    get roleOptions() {
        return this.items;
    }
    handleChange(event) {
        const selectedOption = event.detail.value;
        if(selectedOption != undefined && selectedOption != ""){
            this.chosenValue = selectedOption;
        }   
    }
    get selectedValue(){
    return this.chosenValue;
    }
    handleSave() {
        if (!this.chosenValue) {
            const event = new ShowToastEvent({
                title: 'Error',
                message: 'Please select a value from the picklist.',
                variant: 'error',
            });
            this.dispatchEvent(event);
          }
    const fields = {};
fields[ID_FIELD.fieldApiName] = this.recordId; 
var recordUrl = window.location.origin;
const recordUrl1= recordUrl+'/lightning/setup/Roles/page?address=%2F'+this.chosenValue;
fields[USER_ROLES_FIELD.fieldApiName] = recordUrl1;
let recordInput = {fields};
updateRecord(recordInput)
  .then(() => {
    if (this.chosenValue != ""){
        this.showToast('Success',' Record is updated successfully.', 'success');
        this.dispatchEvent(new RefreshEvent());
    }
  })
  .catch((error) => {
    this.showToast('Error', 'Error updating record.', 'error');
    //console.log('Error updating', error);
  }); 
}
showToast(title, message, variant){
  const toastEvent = new ShowToastEvent({
    title: title,
    message: message,
    variant: variant,
    duration: 2000
  });
  this.dispatchEvent(toastEvent);
}
updateRecordView() {
  setTimeout(() => {
  eval("$A.get('e.force:refreshView').fire();");
  }, 1000);
  }
}
public with sharing class UserRoleController {

    @AuraEnabled (cacheable=true)
    
    public static List<UserRole> getUserRoles(){
    
    return [SELECT Id, Name FROM UserRole];
    
     }
    
    }