DomComplete sometimes show zero in React componentDidMount

I have a react App and want to store the performance data in an object.

I try to collect the data in the react componentDidMount in App.tsx.

interface INavigationPerformanceEntry
  extends PerformanceEntry,
    PerformanceNavigationTiming {
}

document.addEventListener("load", () => {
  setTimeout(() => {
    const entry: INavigationPerformanceEntry = window.performance.getEntriesByType(
      "navigation"
    )[0] as INavigationPerformanceEntry;
    console.log("entry", entry);
    console.log("complete", entry.domComplete);
  }, 1000);
});

And my App component is render in other indexApp.tsx

const app = (
  <Provider store={configuredStore}>
    <HashRouter>
      <App />
    </HashRouter>
  </Provider>
);
ReactDOM.render(app, document.getElementById("app"));

The domcomplete sometimes show the value is 0 and I don't know why it happens since my normal domcomplete is about 5XX ms.

I also check the navigation timeline to call setTimeout on "load" event and react componentDidMount timing.