Possible Bug with routeData

// File PersonPage.tsx

import { Show } from "solid-js";
import { RouteDataArgs, useParams, useRouteData } from "solid-start";
import { createServerData$ } from "solid-start/server";

// Components
import ComponentA from "./ComponentA";

interface IPerson {
    name: string;
    age: number;
    email: string;

    favoriteColor: string;
}

class Person implements IPerson {
    name: string;
    age: number;
    email: string;
    
    favoriteColor: string;

    constructor(person: IPerson) {
        this.name = person.name;
        this.age = person.age;
        this.email = person.email;

        this.favoriteColor = person.favoriteColor;
    }
}

function emptyPerson(): Person {
    return new Person({
        name: "",
        age: 0,
        email: "",
        favoriteColor: "",
    });
}

export function routeData({ params }: RouteDataArgs<{id:string}>) {
    return createServerData$<Person, string>(
        async(personId) => {
            const response = await fetch(`some_url/${personId}`, {
                method: 'POST',
            })

            if (!response.ok) {
                return emptyPerson();
            }
            const data = await response.json() as IPerson;

            return new Person(data)
        },
        { key: () => params.id },
    );
}

export default function PersonPage() {
    const personDetails = useRouteData<typeof routeData>();

    return (<div>
        <Show when={ personDetails()}>
            <div> Hello {personDetails().name} </div>
            <div> Age: {personDetails().age} </div>
            <div> Email: {personDetails().email} </div>

            <ComponentA />
        </Show>
    </div>);
}

// File PersonPage.tsx

import { Show } from "solid-js";
import { RouteDataArgs, useParams, useRouteData } from "solid-start";
import { createServerData$ } from "solid-start/server";

// Components
import ComponentA from "./ComponentA";

interface IPerson {
    name: string;
    age: number;
    email: string;

    favoriteColor: string;
}

class Person implements IPerson {
    name: string;
    age: number;
    email: string;
    
    favoriteColor: string;

    constructor(person: IPerson) {
        this.name = person.name;
        this.age = person.age;
        this.email = person.email;

        this.favoriteColor = person.favoriteColor;
    }
}

function emptyPerson(): Person {
    return new Person({
        name: "",
        age: 0,
        email: "",
        favoriteColor: "",
    });
}

export function routeData({ params }: RouteDataArgs<{id:string}>) {
    return createServerData$<Person, string>(
        async(personId) => {
            const response = await fetch(`some_url/${personId}`, {
                method: 'POST',
            })

            if (!response.ok) {
                return emptyPerson();
            }
            const data = await response.json() as IPerson;

            return new Person(data)
        },
        { key: () => params.id },
    );
}

export default function PersonPage() {
    const personDetails = useRouteData<typeof routeData>();

    return (<div>
        <Show when={ personDetails()}>
            <div> Hello {personDetails().name} </div>
            <div> Age: {personDetails().age} </div>
            <div> Email: {personDetails().email} </div>

            <ComponentA />
        </Show>
    </div>);
}