Rename and Relink "SharePoint" which is on M365 Suite Bar on whole Site

Hi,

The Top left corner of SharePoint Online Site Page we have the word "SharePoint" which is on M365 Suite bar which links to default tenant Site.

We have a requirement where the word SharePoint must be renamed to custom Name and relinked to another site.

Rename was easy using CSS , but relink was not possible. I tried jquery and Javascript 

window.onload = function() { myFunction(); }; and document.addEventListener("DOMContentLoaded", function() { myFunction(); }) Both Did not help , as it changes the link sometimes and sometimes it doesnt.

So went with Application Customizer

approach 1: Did not work at all - Sometimes works Sometimes doesn't after each page load behavior was not same

private modifyM365AppName(): void {
    const appTitleElement = document.getElementById("O365_AppName");
    if (appTitleElement) {
      appTitleElement.textContent = "My Custom App Name";
      if (appTitleElement.tagName === "A") {
        (appTitleElement as HTMLAnchorElement).href = "https://tenant/sites/Test1";
      }

approach 2: it worked only one time after that page loads stopped working 

private observeM365AppName(): void {

const observer = new MutationObserver((mutations, obs) => { const appTitleElement = document.getElementById("O365_AppName"); if (appTitleElement) { this.modifyM365AppName(); obs.disconnect(); // Stop observing once found } }); // Start observing changes in the body (or a specific container) observer.observe(document.body, { childList: true, subtree: true });

} 

private modifyM365AppName(): void { const appTitleElement = document.getElementById("O365_AppName"); if (appTitleElement) { appTitleElement.textContent = "My Custom App Name"; if (appTitleElement.tagName === "A") { (appTitleElement as HTMLAnchorElement).href = "tenant/sites/Test1"; } } }

approach 3 : This works but  I need to keep the Mutation Observer Connect all time , only then it works . If i disconnect it after it finds the element  it doesn't work:

export default class customizerApplicationCustomizer
  extends BaseApplicationCustomizer<IcustomizerApplicationCustomizerProperties> {
    private observer: MutationObserver | null = null;
  public onInit(): Promise<void> {

this.observeM365AppName();

    return Promise.resolve();
  }
  private observeM365AppName(): void {
    

    if (this.observer) {
      this.observer.disconnect();
    }
 
    this.observer = new MutationObserver(() => {
      this.modifyM365AppName();
    });
 
    this.observer.observe(document.body, {childList: true,subtree: true,});
 
    // Apply the first update
    this.modifyM365AppName();
}
  private modifyM365AppName(): void {
    const appTitleElement = document.getElementById("O365_AppName");
    if (appTitleElement) {
      appTitleElement.textContent = "Document Managment System";
      if (appTitleElement.tagName === "A") {
        (appTitleElement as HTMLAnchorElement).href = "https://tenant/sites/Test1";
      }
    }
  }
}

Can you please suggest if Approach 3 is good enough or is there any way to Achieve both Rename and Relink of the work "SharePoint" on M365 Suite bar.

Thanks,
Pallavi