How to use createMemo to process a resource with Suspense

const ConfigureBarSearchMatches = () => {
    const resource = createAsync(async () => {
        await new Promise(resolve => setTimeout(resolve, 300));
        return 'resource';
    });
    const expensive = () => {
        if (!resource()) return null;
        const end = Date.now() + 300;
        while (Date.now() < end); // simulate 300ms cpu
        return resource() + 'expensive';
    };
    const expensiveMemo = createMemo(expensive); // without this memo, I see "loading resource + expensive...", with it, I get the parent suspense
    return (
        <div class="matches">
            <Suspense fallback="loading resource + expensive...">{expensiveMemo()}</Suspense>
        </div>
    );
};
const ConfigureBarSearch = () => {
    // if I use createMemo, I need to add a suspense here or else it falls back to the root suspense.
    return <div><input /><Suspense fallback="parent suspense..."><ConfigureBarSearchMatches /></Suspense></div>
}