Как мне заставить React.useTransition () работать в модалах?

Question

Я пытаюсь заставить material-ui диалог работать с новым режимом одновременного выбора / приостановки React и React.useTransition(). Я считаю, что идея заключается в том, чтобы обернуть функцию изменения состояния в React.useTransition (). Исходя из этого урока, я должен ожидать следующее:

Когда я нажимаю кнопку, на 2 секунды рядом с кнопкой появляется текст «Загрузка». Затем откроется диалоговое окно и покажет слово «Заполнитель» еще 3 секунды. Наконец, в диалоговом окне отображается «Это ваше сообщение».

Вместо этого появляется следующее предупреждение:

Предупреждение: ForwardRef (Portal) вызвал обновление блокировки пользователя, которое приостановлено.

Текст "Загрузка" появляется для флага sh, затем открывается диалоговое окно, сразу показывающее слово "Заполнитель" за 5 секунд до загрузки ресурса.

import React from 'react';
import Dialog from '@material-ui/core/Dialog';
import DialogContent from '@material-ui/core/DialogContent';

interface Resource<T> {
    read(): T
}

function createResource(): Resource<string> {
    let data: string | undefined;
    let error: any;
    let isPending = true;
    const promise = new Promise<string>( (resolve) => {
        setTimeout(() => {resolve('This is your message.');}, 5000);
    }).then(result => {data = result;})
        .catch(e => {error = e;})
        .finally(() => {isPending = false});
    return {
        read() {
            if (isPending) throw promise;
            if (error) throw error;
            return data!!;
        },
    };
}

export default function Resources() {
    const [resource, setResource] = React.useState<Resource<string> | null>(null);
    const [startTransition, isPending] = React.useTransition({ timeoutMs: 2000 });
    return (
        <div>
            {!!resource && <Dialog open onClose={() => setResource(null)}>
                <React.Suspense fallback={<DialogContent>Placeholder</DialogContent>}>
                    <DialogContent>
                        {resource && <ResourceReader resource={resource}/>}
                    </DialogContent>
                </React.Suspense>
            </Dialog>}
            <button onClick={() => startTransition(() => setResource(createResource))}>Click me to view a message!</button>
            {isPending && 'Loading...'}
        </div>
    );
}

function ResourceReader({resource }: { resource: Resource<string>}) {
    return <div>{resource.read()}</div>;
}

Где я go ошибся?