Updated state variable not re-rendering component

[bluewave41]

Describe the bug

Upon trying to swap a component saved in state the component isn't updated when the state variable changes.

Reproduction

https://svelte.dev/playground/807568a9fdc14111ac39093d70bb454d?version=5.19.2

Clicking the X prints "swap" as expected and the state variable updates to Add.svelte but Upload.svelte is still displayed instead of Add. I would expect that since the state component is updated and being passed into Modal that Modal would update to show the newly edited props.

I seem to be able to fix this by instead having Modal render children and pass in the component as a child but I still find it strange that it doesn't work as it is in the playground.

Logs

N/A

System Info

System:
    OS: macOS 13.7.2
    CPU: (10) arm64 Apple M1 Pro
    Memory: 2.92 GB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.13.1 - ~/.n/bin/node
    npm: 10.5.2 - ~/.n/bin/npm
    pnpm: 8.15.4 - ~/.n/bin/pnpm
  Browsers:
    Chrome: 131.0.6778.265
    Safari: 16.6
  npmPackages:
    svelte: ^5.0.0 => 5.16.5

Severity

annoyance

[fznhq]

This happens because ModalType variable is not reactive, you should add $derived in ModalType so it will follow component when it changes. REPL