ReactのViewTransitionで画面遷移に動きを付ける方法

import { ViewTransition, startTransition, useState } from 'react';
import type { Cat } from './cats';
import { Detail, List } from './Pages';

// ViewTransition で包み、切り替えを startTransition の中で行うだけの形
export function Basic() {
  const [selected, setSelected] = useState<Cat | null>(null);
  return (
    <ViewTransition>
      {selected ? (
        <Detail cat={selected} onBack={() => startTransition(() => setSelected(null))} />
      ) : (
        <List onOpen={(cat) => startTransition(() => setSelected(cat))} />
      )}
    </ViewTransition>
  );
}

一覧 → 詳細: 呼び出し 1 回, 見出し「ミケ」
  ::view-transition-group(_t_0_) -ua-view-transition-group-anim-_t_0_ 250ms
  ::view-transition-group(root) -ua-view-transition-group-anim-root 250ms
  ::view-transition-new(_t_0_) -ua-view-transition-fade-in 250ms
  ::view-transition-new(root) -ua-view-transition-fade-in 250ms
  ::view-transition-old(_t_0_) -ua-view-transition-fade-out 250ms
  ::view-transition-old(root) -ua-view-transition-fade-out 250ms

一覧 → 詳細: 呼び出し 0 回, 見出し「ミケ」
  （アニメーションなし）
詳細 → 一覧: 呼び出し 0 回, 見出し「猫の一覧」
  （アニメーションなし）

import { ViewTransition, addTransitionType, startTransition, useState } from 'react';
import type { Cat } from './cats';
import { Detail, List } from './Pages';
import './transitions.css';

export function Gallery() {
  const [selected, setSelected] = useState<Cat | null>(null);

  function open(cat: Cat) {
    startTransition(() => {
      addTransitionType('forward');
      setSelected(cat);
    });
  }

  function back() {
    startTransition(() => {
      addTransitionType('back');
      setSelected(null);
    });
  }

  return (
    <ViewTransition
      key={selected ? 'detail' : 'list'}
      default="none"
      enter={{ forward: 'slide-from-right', back: 'slide-from-left', default: 'none' }}
      exit={{ forward: 'slide-to-left', back: 'slide-to-right', default: 'none' }}
    >
      {selected ? <Detail cat={selected} onBack={back} /> : <List onOpen={open} />}
    </ViewTransition>
  );
}

typeerror/Gallery.tsx(27,7): error TS2322: Type '{ forward: "slide-from-right"; back: "slide-from-left"; }' is not assignable to type 'ViewTransitionClass | undefined'.
  Property 'default' is missing in type '{ forward: "slide-from-right"; back: "slide-from-left"; }' but required in type 'ViewTransitionClassPerType'.

@keyframes slide-in-from-right { from { transform: translateX(100%); } }
@keyframes slide-in-from-left { from { transform: translateX(-100%); } }
@keyframes slide-out-to-left { to { transform: translateX(-100%); } }
@keyframes slide-out-to-right { to { transform: translateX(100%); } }

/* 進むとき：新しい画面は右から入り、古い画面は左へ出る */
::view-transition-new(.slide-from-right) { animation: 300ms ease-out both slide-in-from-right; }
::view-transition-old(.slide-to-left) { animation: 300ms ease-out both slide-out-to-left; }
/* 戻るとき：向きを逆にする */
::view-transition-new(.slide-from-left) { animation: 300ms ease-out both slide-in-from-left; }
::view-transition-old(.slide-to-right) { animation: 300ms ease-out both slide-out-to-right; }

一覧 → 詳細: 呼び出し 1 回, 見出し「ミケ」
  ::view-transition-new(_t_1_) slide-in-from-right 300ms
  ::view-transition-old(_t_0_) slide-out-to-left 300ms
詳細 → 一覧: 呼び出し 1 回, 見出し「猫の一覧」
  ::view-transition-new(_t_2_) slide-in-from-left 300ms
  ::view-transition-old(_t_1_) slide-out-to-right 300ms

function Photo({ cat, size }: { cat: Cat; size: 'small' | 'large' }) {
  // 一覧と詳細で同じ name を付けると、写真が場所を移るように動く
  return (
    <ViewTransition name={`photo-${cat.id}`} share="photo-morph">
      <div className={`photo photo--${size}`} style={{ background: cat.color }} />
    </ViewTransition>
  );
}

/* 場所を移る写真を、入れ替わる画面より手前に出す */
::view-transition-group(.photo-morph) { z-index: 1; }

--- z-index を付けない場合
詳細 → 一覧: 写真の group の z-index auto / 写真の色の画素数 50ms: 34334, 100ms: 1880, 150ms: 0, 200ms: 0 / 終わった後: 3764
--- z-index: 1 を付けた場合
詳細 → 一覧: 写真の group の z-index 1 / 写真の色の画素数 50ms: 48598, 100ms: 15710, 150ms: 5714, 200ms: 4751 / 終わった後: 3764

<div key={selected ? 'detail' : 'list'}>
  <ViewTransition default="none" enter="slide-from-right" exit="slide-to-left">
    {/* 一覧か詳細 */}
  </ViewTransition>
</div>

--- wrapped
一覧 → 詳細: 呼び出し 1 回, 見出し「ミケ」
  ::view-transition-group(photo-mike) -ua-view-transition-group-anim-photo-mike 250ms
  ::view-transition-new(photo-mike) -ua-mix-blend-mode-plus-lighter 250ms
  ::view-transition-new(photo-mike) -ua-view-transition-fade-in 250ms
  ::view-transition-old(photo-mike) -ua-mix-blend-mode-plus-lighter 250ms
  ::view-transition-old(photo-mike) -ua-view-transition-fade-out 250ms
  ::view-transition-old(root) -ua-view-transition-fade-out 250ms

/* 動きを減らす設定の人には、アニメーションを付けない */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

--- gallery (reducedMotion: reduce)
一覧 → 詳細: 呼び出し 1 回, 見出し「ミケ」
  （アニメーションなし）

--- gallery (startViewTransition なし)
startViewTransition あり: false
一覧 → 詳細: 呼び出し 0 回, 見出し「ミケ」
  （アニメーションなし）