svg -> The requested module 'XXX' does not provide an export named 'ReactComponent' | TypeScript Community | Page 1

I'm trying to view my component in Storybook, and I'm using Vite.

The full error occurs when trying to view this component in Storybook, there seems to be an issue with importing an SVG as a ReactComponent:

The requested module '/src/components/atoms/phones/Apple/iPhone12/with-frame.svg?import' does not provide an export named 'ReactComponent'

IPhone.tsx

import React from 'react'
import { ReactComponent as Frame} from './with-frame.svg'

export default function IPhone () {
  return (
    <div className='IPhone'>
      <Frame></Frame>
    </div>
  )
}

vite.config.ts

import { defineConfig } from 'vite'
import eslint from 'vite-plugin-eslint'
import react from '@vitejs/plugin-react-swc'
import svgr from "vite-plugin-svgr";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [eslint(), react(), svgr()],
})

src/custom.d.ts

declare module '*.svg' {
  import React = require('react');
  export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
  const src: string;
  export default src;
}

tsconfig.json
{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "allowJs": false,
    "skipLibCheck": true,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "types": ["vite-plugin-svgr/client"]
  },
  "include": ["src", "src/custom.d.ts"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

#svg -> The requested module 'XXX' does not provide an export named 'ReactComponent'