Remirror WhitespaceExtension not behaving

Question

I'm setting up a basic WYSIWYG editor in Remirror (from scratch, not using the provided WysiwygEditor) and I'm running into an issue where the WhitespaceExtension doesn't seem to be respecting the default or toggle settings. Everything else seems to work relatively well, starting out.

My assumption is that the WhitespaceExtension should be off at the start, but I get this:

Toggling on whitespace in the toolbar has no effect (other than changing the color of the button):

I can then toggle whitespace off again:

BUT trying to type immediately after that gives this:

In other words, the toggled-off whitespace stays toggled off, but any new whitespace characters get a placeholder, even though they shouldn't.

I've even tried initializing it with a WhitespaceOptions of { initialVisibility: false }, but it doesn't make a difference.

Presumably there's something very obvious I'm either doing or not doing, but I'm not sure what.

Here's the code for the editor:

import React, { useEffect, useRef, useState } from "react";

import {
    Remirror,
    ThemeProvider,
    useCommands,
    useCurrentSelection,
    useHelpers,
    useRemirror,
} from '@remirror/react';

import {
    BoldExtension, ItalicExtension, UnderlineExtension, StrikeExtension,
    DropCursorExtension,
    FontFamilyExtension, FontSizeExtension, 
    HistoryExtension,
    NodeFormattingExtension,
    TextCaseExtension,
    TrailingNodeExtension,
    WhitespaceExtension,
    YjsExtension
} from 'remirror/extensions';

import {
    Toolbar,
    CommandButton, CommandButtonGroup,
    VerticalDivider,
    HistoryButtonGroup,
    CopyButton, CutButton, PasteButton,
    BasicFormattingButtonGroup, ToggleStrikeButton,
    TextAlignmentButtonGroup, JustifyAlignButton,
    ToggleWhitespaceButton,
} from '@remirror/react-components';

import { FindExtension } from '@remirror/extension-find';

import * as Y from 'yjs';
import { WebrtcProvider } from 'y-webrtc';

import 'remirror/styles/all.css';

import './editor.css';


function MyToolbar() {
    return (
        <Toolbar>
        <HistoryButtonGroup />
        <CommandButtonGroup>
            <CopyButton /><CutButton /><PasteButton />
        </CommandButtonGroup>
        <CommandButtonGroup>
            <BasicFormattingButtonGroup /><ToggleStrikeButton />
        </CommandButtonGroup>
        <CommandButtonGroup>
            <TextAlignmentButtonGroup /><JustifyAlignButton />
        </CommandButtonGroup>
        <CommandButtonGroup>
            <ToggleWhitespaceButton />
        </CommandButtonGroup>
        </Toolbar>
    )
}


export function Editor(props) {

    const ydoc = new Y.Doc();
    // Clients connected to the same roomname share document updates
    const provider = new WebrtcProvider('test-session', ydoc,
        { signaling: ['wss://signaling.yjs.dev', 'wss://y-webrtc-eu.fly.dev'] });

    const {manager, state} = useRemirror({
        extensions: () => [
            new DropCursorExtension(),
            new HistoryExtension(),
            new BoldExtension(),
            new ItalicExtension(),
            new UnderlineExtension(),
            new StrikeExtension(),
            new NodeFormattingExtension(),
            new TrailingNodeExtension(),
            new WhitespaceExtension({ initialVisibility: false }),
            new YjsExtension({ getProvider: () => provider })
        ],
        core: {
            excludeExtensions: ['history']
        },
        selection: 'start'
    });
    
    useEffect(() => {
        // Run once
    }, []);
    
    return (
        <div className="editor-holder">
        <div id="editor" className="editor light-page full-height">
        <ThemeProvider>
        <div className='remirror-theme'>
        <Remirror manager={manager} autoFocus autoRender='end'>
        <MyToolbar />
        </Remirror>
        </div>
        </ThemeProvider>
        </div>
        </div>
    );
}