SPFx Web Part Fails to Render on Classic SharePoint Page but Works on Modern Page

I am experiencing an issue with a SharePoint Framework (SPFx) web part that works perfectly on modern SharePoint pages but fails to render on classic SharePoint pages. The web part is a simple one (no framework) designed to display "Hello, World!".

Details of the Problem:

• Environment: SharePoint Online

• Web Part Type: SPFx (No framework)

• Behavior:

  • Modern Page: The web part renders correctly and displays "Hello, World!".
  • Classic Page: The web part fails to render and throws the following error:

    TypeError: Cannot read properties of null (reading 'innerHTML')
      at e.convertHtmlToWebPartData (sp-classic-page-assembly_en-us_fb10b86b7fae0a052d1ea8860a478f62.js:168:94742)
      at d.\_normalizeWebPartData (sp-classic-page-assembly_en-us_fb10b86b7fae0a052d1ea8860a478f62.js:169:117244)
      at d.loadWebPart (sp-classic-page-assembly_en-us_fb10b86b7fae0a052d1ea8860a478f62.js:169:115060)
      at Simple.aspx:761:37
    

• Ensured Element Exists: Verified that the element exists in the HTML of the classic page.

• Script Execution Timing: Used DOMContentLoaded and window.onload to ensure the script runs after the DOM is fully loaded.

• Element Check: Added checks to ensure the element is not null before accessing its properties.

Here is the code I have implemented in the typescript file:

import { Version } from '@microsoft/sp-core-library';
import {
  type IPropertyPaneConfiguration,
  PropertyPaneTextField
} from '@microsoft/sp-property-pane';
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
import type { IReadonlyTheme } from '@microsoft/sp-component-base';

import styles from './SimpleWebPart.module.scss';
import * as strings from 'SimpleWebPartStrings';

export interface ISimpleWebPartProps {
  description: string;
}

export default class SimpleWebPart extends BaseClientSideWebPart<ISimpleWebPartProps> {


  public render(): void {
    this.domElement.innerHTML = `
      <div class="${styles.simple}">
        <h1>Hello, World!</h1>
      </div>`;
    
    window.onload = () => {
        console.log('DOM fully loaded and parsed');
        const element = this.domElement.querySelector('.simple');
        if (element) {
            console.log('Element found:', element);
            element.innerHTML = '<h1>Hello, World!</h1>';
        } else {
            console.error('Element not found');
        }
    };
  }

  protected onInit(): Promise<void> {
    return Promise.resolve();
  }

  protected onThemeChanged(currentTheme: IReadonlyTheme | undefined): void {
    if (!currentTheme) {
      return;
    }

  }

  protected get dataVersion(): Version {
    return Version.parse('1.0');
  }

  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return {
      pages: [
        {
          header: {
            description: strings.PropertyPaneDescription
          },
          groups: [
            {
              groupName: strings.BasicGroupName,
              groupFields: [
                PropertyPaneTextField('description', {
                  label: strings.DescriptionFieldLabel
                })
              ]
            }
          ]
        }
      ]
    };
  }
}

I want the web part to render correctly on classic pages within a modern SharePoint site. The web part works fine on modern pages, displaying "Hello, World!" as expected. However, it fails to render on classic pages and throws a TypeError. I am looking for a solution to ensure consistent rendering across both classic and modern pages within the same site.