Storybook fails to load story with npm link: "react is not defined" (using React 18)

Question

I'm building a UI component library using React 18 and exporting a Button.tsx component in it. Then, to test that I can use that Button component, i'm importing it into a different component, Test.tsx, within that same UI component library code package (using npm link) and creating a story for that component.

So Test.tsx looks like this:

import Button from 'my-component-library'

const Test = (): JSX.Element => {
  return (
    <>
      <Button title='test' body='test' />
    </>
  )
}

export default Test

And this is the Story for Test.tsx:

import { Meta, Story } from '@storybook/react'
import React from 'react'

import Test from './Test'

export default {
  title: 'Test',
  component: Test,
} as Meta

export const Default: Story<any> = () => <Test />

But if I want to view this story, I'm getting the following error in the Storybook UI:

Couldn't find story matching 'test--default'.
- Are you sure a story with that id exists?
- Please check your stories field of your main.js config.
- Also check the browser console and terminal for error messages.

And the following error in the browser console:

Unexpected error while loading ./components/Test/Test.stories.tsx: react is not defined
ReferenceError: react is not defined

How can I fix this?