react-typescript-ts boilerplate throws errors after switching TO client side routing

[devcshort]

I scaffolded a new project using

npm init vite-plugin-ssr@latest

Selected the react-typescript template.

From there, I added the below to my _default.page.client.tsx

export const hydrationCanBeAborted = true;
export const clientRouting = true;

After this, all of my route changes start throwing errors in the console

Warning: You are calling ReactDOMClient.createRoot() on a container that has already been passed to createRoot() before. Instead, call root.render() on the existing root instead if you want to update it.
overrideMethod @ react_devtools_backend.js:4012
printWarning @ react-dom.development.js:86
error @ react-dom.development.js:60
warnIfReactDOMContainerInDEV @ react-dom.development.js:29471
hydrateRoot @ react-dom.development.js:29406
hydrateRoot$1 @ react-dom.development.js:29810
exports.hydrateRoot @ client.js:20
render @ _default.page.client.tsx:10
(anonymous) @ useClientRouter.js?v=4418b82a:153
(anonymous) @ callHookWithTimeout.js?v=4418b82a:32
callHookWithTimeout @ callHookWithTimeout.js?v=4418b82a:38
(anonymous) @ useClientRouter.js?v=4418b82a:153
fetchAndRender @ useClientRouter.js?v=4418b82a:156
await in fetchAndRender (async)
(anonymous) @ useClientRouter.js?v=4418b82a:27
onClick @ useClientRouter.js?v=4418b82a:196


react_devtools_backend.js:4012 Warning: Prop `className` did not match. Server: "navitem" Client: "navitem is-active"
    at a
    at Link (http://localhost:3000/renderer/Link.tsx:21:23)
    at div
    at Sidebar (http://localhost:3000/renderer/PageShell.tsx:99:3)
    at div
    at Layout (http://localhost:3000/renderer/PageShell.tsx:82:3)
    at PageContextProvider (http://localhost:3000/renderer/usePageContext.tsx:22:3)
    at PageShell (http://localhost:3000/renderer/PageShell.tsx:24:3)
overrideMethod @ react_devtools_backend.js:4012
printWarning @ react-dom.development.js:86
error @ react-dom.development.js:60
warnForPropDifference @ react-dom.development.js:9571
diffHydratedProperties @ react-dom.development.js:10414
hydrateInstance @ react-dom.development.js:11306
prepareToHydrateHostInstance @ react-dom.development.js:12564
completeWork @ react-dom.development.js:22181
completeUnitOfWork @ react-dom.development.js:26596
performUnitOfWork @ react-dom.development.js:26568
workLoopSync @ react-dom.development.js:26466
renderRootSync @ react-dom.development.js:26434
performConcurrentWorkOnRoot @ react-dom.development.js:25738
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533


react_devtools_backend.js:4012 Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.
overrideMethod @ react_devtools_backend.js:4012
printWarning @ react-dom.development.js:86
error @ react-dom.development.js:60
errorHydratingContainer @ react-dom.development.js:11473
recoverFromConcurrentError @ react-dom.development.js:25846
performConcurrentWorkOnRoot @ react-dom.development.js:25750
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533


react-dom.development.js:9647 Uncaught Error: Text content does not match server-rendered HTML.
    at checkForUnmatchedText (react-dom.development.js:9647:11)
    at diffHydratedProperties (react-dom.development.js:10310:13)
    at hydrateInstance (react-dom.development.js:11306:10)
    at prepareToHydrateHostInstance (react-dom.development.js:12564:23)
    at completeWork (react-dom.development.js:22181:17)
    at completeUnitOfWork (react-dom.development.js:26596:16)
    at performUnitOfWork (react-dom.development.js:26568:5)
    at workLoopSync (react-dom.development.js:26466:5)
    at renderRootSync (react-dom.development.js:26434:7)
    at performConcurrentWorkOnRoot (react-dom.development.js:25738:74)
checkForUnmatchedText @ react-dom.development.js:9647
diffHydratedProperties @ react-dom.development.js:10310
hydrateInstance @ react-dom.development.js:11306
prepareToHydrateHostInstance @ react-dom.development.js:12564
completeWork @ react-dom.development.js:22181
completeUnitOfWork @ react-dom.development.js:26596
performUnitOfWork @ react-dom.development.js:26568
workLoopSync @ react-dom.development.js:26466
renderRootSync @ react-dom.development.js:26434
performConcurrentWorkOnRoot @ react-dom.development.js:25738
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533


react-dom.development.js:12507 Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.
    at throwOnHydrationMismatch (react-dom.development.js:12507:9)
    at tryToClaimNextHydratableInstance (react-dom.development.js:12535:7)
    at updateHostText (react-dom.development.js:19930:5)
    at beginWork (react-dom.development.js:21621:14)
    at beginWork$1 (react-dom.development.js:27426:14)
    at performUnitOfWork (react-dom.development.js:26557:12)
    at workLoopSync (react-dom.development.js:26466:5)
    at renderRootSync (react-dom.development.js:26434:7)
    at performConcurrentWorkOnRoot (react-dom.development.js:25738:74)
    at workLoop (scheduler.development.js:266:34)
throwOnHydrationMismatch @ react-dom.development.js:12507
tryToClaimNextHydratableInstance @ react-dom.development.js:12535
updateHostText @ react-dom.development.js:19930
beginWork @ react-dom.development.js:21621
beginWork$1 @ react-dom.development.js:27426
performUnitOfWork @ react-dom.development.js:26557
workLoopSync @ react-dom.development.js:26466
renderRootSync @ react-dom.development.js:26434
performConcurrentWorkOnRoot @ react-dom.development.js:25738
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533


react-dom.development.js:12507 Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.
    at throwOnHydrationMismatch (react-dom.development.js:12507:9)
    at tryToClaimNextHydratableInstance (react-dom.development.js:12535:7)
    at updateHostComponent (react-dom.development.js:19902:5)
    at beginWork (react-dom.development.js:21618:14)
    at beginWork$1 (react-dom.development.js:27426:14)
    at performUnitOfWork (react-dom.development.js:26557:12)
    at workLoopSync (react-dom.development.js:26466:5)
    at renderRootSync (react-dom.development.js:26434:7)
    at performConcurrentWorkOnRoot (react-dom.development.js:25738:74)
    at workLoop (scheduler.development.js:266:34)
throwOnHydrationMismatch @ react-dom.development.js:12507
tryToClaimNextHydratableInstance @ react-dom.development.js:12535
updateHostComponent @ react-dom.development.js:19902
beginWork @ react-dom.development.js:21618
beginWork$1 @ react-dom.development.js:27426
performUnitOfWork @ react-dom.development.js:26557
workLoopSync @ react-dom.development.js:26466
renderRootSync @ react-dom.development.js:26434
performConcurrentWorkOnRoot @ react-dom.development.js:25738
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533


react-dom.development.js:19849 Uncaught Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.
    at updateHostRoot (react-dom.development.js:19849:57)
    at beginWork (react-dom.development.js:21615:14)
    at beginWork$1 (react-dom.development.js:27426:14)
    at performUnitOfWork (react-dom.development.js:26557:12)
    at workLoopSync (react-dom.development.js:26466:5)
    at renderRootSync (react-dom.development.js:26434:7)
    at recoverFromConcurrentError (react-dom.development.js:25850:20)
    at performConcurrentWorkOnRoot (react-dom.development.js:25750:22)
    at workLoop (scheduler.development.js:266:34)
    at flushWork (scheduler.development.js:239:14)

[devcshort]

I missed the second part on the client side routing page of the docs.