Can't use StoryblokComponent from storyblok/react in my Shopify Hydrogen project

I'm trying to integrate storyblok's preview/live editing features in my Shopify Hydrogen app. There's isn't any documentation on how to do this in Hydrogen, so I've been using a combination of the react-specific documentation and nextjs-specific documentation to try to figure it out.

I have everything configured correctly in Storyblok (I built a simple nextjs app and can get the preview/live editing features working correctly there.) But I can't figure out how to get the StoryblokComponent working in my Hydrogen app.

Here's what I'm doing:

I've put the storyblokInit function in App.server.jsx and that part seems to be working (I think).

import { storyblokInit, apiPlugin } from '@storyblok/react';
import { Page } from './components/storyblok/Page.client';
import { Teaser } from './components/storyblok/Teaser.client';

const storyblokComponents = {
  page: Page,
  teaser: Teaser
}

storyblokInit({
  accessToken: 'xxxxxxx',
  use: [apiPlugin],
  storyblokComponents
});

I'm fetching my Storyblok data using hydrogen's fetchSync. This is working as expected.

export function getStoryblokData(slug) {
    if (isServer()) {
        const storyblokData = fetchSync(
            'https://api.storyblok.com/v2/cdn/stories/' + slug + '?token=' + storyblokToken,
            {
              preload: true,
              cache: CacheLong(),
            }
          ).json();
          log.debug('storyblok data from slug: /' + slug, storyblokData);
          return storyblokData;
    }
}

I've built the Page and Teaser components pretty much just copy/pasting from the tutorials.

import { storyblokEditable, StoryblokComponent } from "@storyblok/react";
 
function Page({ blok }) {
  return (
    <main {...storyblokEditable(blok)}>
      {blok.body.map((nestedBlok) => (
        <StoryblokComponent blok={nestedBlok} key={nestedBlok._uid} />
      ))}
    </main>
  );
}
 
export default Page;


import { storyblokEditable } from "@storyblok/react";

const Teaser = ({ blok }) => {
  return <h2 style={{textAlign: 'center'}} 
    {...storyblokEditable(blok)} >{blok.headline}</h2>;
};
 
export default Teaser;

Then in index.server.jsx I'm trying to use StoryblokComponent from storyblok/react

import {
  StoryblokComponent,
} from "@storyblok/react";
 let storyblokData = getStoryblokData('home');
    
  return (
    <>
      <StoryblokComponent blok={storyblokData.story.content} />
    </>
  );
}

This, as far as I can tell, is where things go wrong. My app breaks and I get this error message:

Error processing route: http://localhost:3000/
TypeError: Cannot read properties of undefined (reading 'page')
    at q (/Users/jbaudreau/Desktop/DEMO/hydrogen-storyblok-demo/node_modules/@storyblok/react/dist/storyblok-react.js:7:1033)
    at ce (/Users/jbaudreau/Desktop/DEMO/hydrogen-storyblok-demo/node_modules/@storyblok/react/dist/storyblok-react.js:7:429)
    at attemptResolveElement (/node_modules/@shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite-writer.browser.server.js?v=32cf2471:1060:12)
    at resolveModelToJSON (/node_modules/@shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite-writer.browser.server.js?v=32cf2471:1377:21)
    at Array.toJSON (/node_modules/@shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite-writer.browser.server.js?v=32cf2471:1029:14)
    at stringify (<anonymous>)
    at processModelChunk (/node_modules/@shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite-writer.browser.server.js?v=32cf2471:164:14)
    at retryTask (/node_modules/@shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite-writer.browser.server.js?v=32cf2471:1625:26)
    at performWork (/node_modules/@shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite-writer.browser.server.js?v=32cf2471:1658:7)
    at eval (/node_modules/@shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite-writer.browser.server.js?v=32cf2471:1139:14)
    at scheduleWork (/node_modules/@shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite-writer.browser.server.js?v=32cf2471:58:3)
    at pingTask (/node_modules/@shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite-writer.browser.server.js?v=32cf2471:1138:5)
    at ping (/node_modules/@shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite-writer.browser.server.js?v=32cf2471:1152:14)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

If anyone can help me figure this out, I'd really appreciate it!