Rooster-react set ribbon theming based on fluent ui theme provider

Question

Problem

I'm working on a react app (CRA) with rooster-react, which utilizes @fluentui, so I was trying to set the theme of the toolbar using the respective theme provider, but it doesn't seem to have any effect.

Steps

I created a new project from scratch to figure out what the problem, with no avail, here are the steps I followed:

1. Created a react app with CRA 5

npx create-react-app test --template typescript

2. Installed the following packages:

"@fluentui/react": "8.112.6",
"roosterjs": "^8.54.0",
"roosterjs-editor-types": "^8.54.0",
"roosterjs-react": "^8.51.0",

3. Edited the package @fluentui/react-portal-compat-context in package-lock.json to 9.0.6 as instructed here
4. Created the following component

import { useMemo } from "react";
import { IEditor, getDarkColor } from "roosterjs";
import {
  createRibbonPlugin,
  getButtons,
  Ribbon,
  RibbonButton,
  Rooster,
  AllButtonKeys,
} from "roosterjs-react";
import { initializeIcons } from "@fluentui/react/lib/Icons";
import { ThemeProvider, DefaultPalette } from "@fluentui/react";

const darkPalette = Object.entries(DefaultPalette).reduce(
  (result, [name, color]) => ({ ...result, [name]: getDarkColor(color) }),
  { ...DefaultPalette }
);

initializeIcons();

export function RoosterEditor({ value }: {value?: string) {
  const themeMode = "dark"; // using a custom provider with a different name + hook in the actual code
  const ribbonPlugin = useMemo(createRibbonPlugin, []);
  const plugins = useMemo(() => [ribbonPlugin], [ribbonPlugin]);
  const buttons = useMemo(() => getButtons(AllButtonKeys), []) as RibbonButton<string>[];

  const inDarkMode = themeMode === "dark";
  const themePalette = inDarkMode ? darkPalette : DefaultPalette;
  const theme = { palette: themePalette };

  return (
    <ThemeProvider theme={theme} applyTo="body">
      <Ribbon plugin={ribbonPlugin} buttons={buttons} />
      <Rooster plugins={plugins} initialContent={value} inDarkMode={inDarkMode} />
    </ThemeProvider>
  );
}

5. Updated index.tsx:

import React from "react";
import ReactDOM from "react-dom/client";
import { RoosterEditor } from "./RoosterEditor";

const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
root.render(<React.StrictMode><RoosterEditor /></React.StrictMode>);

Samples

I created a sample repo and Netlify example which don't seem to work:

But when I copied an empty react application sandbox and followed the same steps it worked, you can check it here.

You can also check the official demo here (the theme mode toggle is one of the last buttons on the ribbon).

What am I doing wrong with the blank CRA project?