SharePoint Framework クエリ文字列変化時に React コンポーネントを再レンダリングする

/* eslint-disable @typescript-eslint/no-explicit-any */
/* eslint-disable @typescript-eslint/explicit-function-return-type */
import { useEffect, useState } from 'react';

export const useParam = () => {
  const [_param, setParam] = useState(() => location.href.toLowerCase());

  const bindToHistory = (): void => {
    const defaultPushState = history.pushState;
    const defaultReplaceState = history.replaceState;
    const checkPage = (data: any, title: string, url?: string | null): void => {
      if (url) {
        const lurl = url.toLowerCase();
        setParam(lurl);
      }
    }
    const pushState = () => {
      return function (data: any, title: string, url?: string | null) {
        checkPage(data, title, url);
        return defaultPushState.apply(this, [data, title, url]);
      }
    }

    const replaceState = () => {
      return function (data: any, title: string, url?: string | null) {
        checkPage(data, title, url);
        return defaultReplaceState.apply(this, [data, title, url]);
      }
    }

    history.pushState = pushState();
    history.replaceState = replaceState();
  }

  useEffect(() => {
    const exit = () => {
      const lurl = location.href.toLowerCase();
      setParam(lurl);
    }

    bindToHistory();

    window.addEventListener('popstate', exit);
    return () => {
      window.removeEventListener('popstate', exit);
    }
  }, []);

  return _param;
}

import * as React from 'react';
import { useParam } from '../hooks/getParam';
const Header: React.FC<{}> = () => { 
  const _param = useParam();
  return (
    <>
      <div
        style={{
          backgroundColor: '#eaeaea',
          color: '#000000',
          padding:'8px'
        }}
      >{_param }</div>
    </>
  );
}
export default Header;

/* eslint-disable @typescript-eslint/no-non-null-assertion */
import {
  BaseApplicationCustomizer,
  PlaceholderContent,
  PlaceholderName
} from '@microsoft/sp-application-base';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import Header from './components/Header'

export default class SampleApplicationCustomizer
  extends BaseApplicationCustomizer<{}> {
  private _topPlaceholder: PlaceholderContent | undefined;
  public onInit(): Promise {
    this._renderTopPlaceHolder();
    return Promise.resolve();
  }
  private _renderTopPlaceHolder(): void {
    if (!this._topPlaceholder) {
      this._topPlaceholder = this.context.placeholderProvider.tryCreateContent(
        PlaceholderName.Top, { onDispose: this._onDispose });
    }
    const element: React.ReactElement<{}> = React.createElement(Header, {  });
    ReactDOM.render(element, this._topPlaceholder!.domElement);
  }
  private _onDispose(): void {
    if (this._topPlaceholder!.domElement) {
      ReactDOM.unmountComponentAtNode(this._topPlaceholder!.domElement);
    }
  }
}

gulp bundle
gulp package-solution

gulp serve --nobrowser