render error with react 17 when first load

[where-picturesque]

What version of Remix are you using?

1.19.3

Are all your remix dependencies & dev-dependencies using the same version?

• Yes

Steps to Reproduce

This is a reproducible demo.
React version:17. React18 or jump from other pages to this page, UI can render normally.
It seems that UI did not re render when document had value in React17.

scene one

let jumpHref = "";
if (typeof window != "undefined") {
  jumpHref = "https://domain.com?return_addres=" + window.location.origin + "/login";
}

<a href={jumpHref}>jump with return address,but href renders incorrectly </a>

scene two

const toPixel = (r) => {
  if (typeof document != "undefined") {
    return parseInt((document.documentElement.clientWidth * 16 * r) / 375);
  } else {
    console.log("topixel nan");
    return NaN;
  }
};

<div style={{ minHeight: toPixel(2.5), color: "blue", background: "red" }}>min-height:NaNpx</div>

Expected Behavior

scene one

<a href="https://domain.com?return_addres=xxxx/login">jump with return address,but href renders incorrectly</a>

scene two

<div style="min-height:100px;color:blue;background:red">min-height:NaNpx</div>

Actual Behavior

scene one

<a href="">jump with return address,but href renders incorrectly</a>

scene two

<div style="min-height:NaNpx;color:blue;background:red">min-height:NaNpx</div>