Storybook + vite/Remix.run + svg components

[Alvacampos]

Hi, I'm working on a storybook implementation with react vite, it mostly works but when a component that inside has an SVG component I get the error ReferenceError: React is not defined

The component is very simple

import { Alert as AlertIcon } from '~/components/icons';

import styles from './style.css?url';

export const links = () => [{ rel: 'stylesheet', href: styles }];

function Alert() {
  return (
    <div>
      <AlertIcon /> //If I take this it works, I can render anything but an SVG component
    </div>
  );
}

export default Alert;

storybook/main.js

/** @type { import('@storybook/react-vite').StorybookConfig } */
const config = {
  stories: ['../app/components/**/*.stories.ts'],
  addons: [
    '@storybook/addon-onboarding',
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@chromatic-com/storybook',
    '@storybook/addon-interactions',
    'storybook-react-intl',
  ],
  framework: {
    name: '@storybook/react-vite',
    options: {
      builder: {
        viteConfigPath: 'sb-vite.config.ts',
      },
    },
  },
  docs: {
    autodocs: 'tag',
  },
};
export default config;

vite.config.ts

import { defineConfig, loadEnv } from 'vite';
import tsconfigPaths from 'vite-tsconfig-paths';

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), '');
  process.env = { ...process.env, ...env };

  return {
    // no Remix Vite plugin here
    plugins: [tsconfigPaths()],
  };
});

Alert.jsx

const SvgAlert = (props) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    fill="none"
    viewBox="0 0 24 24"
    height="100%"
    role="img"
    {...props}
  >
    <path
      fill="#0D5BFF"
      d="M12 0C5.376 0 0 5.376 0 12s5.376 12 12 12 12-5.376 12-12S18.608 0 12 0m1.356 5.284-.386 8.719h-1.74l-.4-8.72zm-1.233 13.432c-.878 0-1.556-.647-1.556-1.54 0-.894.678-1.556 1.556-1.556.863 0 1.54.662 1.54 1.556 0 .893-.693 1.54-1.54 1.54"
    />
  </svg>
);
export default SvgAlert;

stories.js

import './style.css';
import '~/styles/global/global.css';

import type { Meta, StoryObj } from '@storybook/react';

import Alert from './index';

const meta: Meta<typeof Alert> = {
  component: Alert,
};

export default meta;
type Story = StoryObj<typeof Alert>;

export const Neutral: Story = {
  args: {
    message: 'NEUTRAL',
  },
};

Not sure what I'm missing, as long as I don't use and SVG component the stories is able to render the component, the second I add the SVG component I get the error ReferenceError: React is not defined

[Alvacampos]

A screenshot of the error