Shallow Routing throws 404 when typing address directly or reloading item url. How to fix this?

Shallow routing works well when clicking on an item

Shallow routing throws 404 when typing item url directly

Link to Stackblitz that shows the issue

src/routes/(news)/+layout.svelte

<script lang="ts">import './../../app.css'import { page } from '$app/stores';import { pushState } from '$app/navigation';import { MediaQuery } from 'svelte/reactivity';const { children, data } = $props();const large = new MediaQuery('min-width: 800px');    const hasNoDetailSelected = $derived.by(() => {        return (            typeof $page.state.id === 'undefined'&& typeof $page.state.title === 'undefined'        );    });  function onClickItem() {    pushState('/news/abcdabcd-abcd-abcd-abcd-abcdabcdabcd/title-1', {id: 'abcdabcd-abcd-abcd-abcd-abcdabcdabcd', title: 'title-1'})  }</script><header class="header"><h1><a data-sveltekit-preload-data="off" href="/">TestNewsApp</a></h1></header>{#if large.current}<main style="flex-direction: row"><div class="news-list-container"><nav><ul><li onclick={onClickItem}>Item 1</li></ul></nav></div><div class="news-detail-container">    {@render children()}</div></main>{:else if !large.current && hasNoDetailSelected}<main style="flex-direction: column"><div class="news-list-container"><nav><ul><li onclick={onClickItem}>Item 1</li></ul></nav></div></main>{:else}<main style="flex-direction: column"><div class="news-detail-container">  {@render children()}</div></main>{/if}<style>.news-detail-container {  background-color: lightyellow;  flex: 1;}.news-list-container {  background-color: lightcyan;  flex: 1;}main {  display: flex;  flex: 1;}</style>

src/routes/(news)/+page.svelte

<script lang='ts'>import {page} from '$app/stores';</script>{#if $page.state.id && $page.state.title}<p>Detail Page</p>{:else}<p>Popular News</p>{/if}

Question

• How do I make this work when the url is typed directly?