Need some help declaring global modules using yarn workspaces. Can’t figure out where to put declarations so they work as expected

File structure:

root/
├── app/
├── common/
│   ├── assets/
│   │   ├── example.svg
│   ├── components/
│       ├── Icon/
│           ├── Icon.tsx
├── global.d.ts
├── package.json
├── tsconfig.json

global.d.ts

declare module '*.png';
declare module '*.svg?react';
declare module '*.json';

tsconfig.json

{
  "compilerOptions": {
    "declaration": true,
    "paths": {
      "@common/*": ["./common/*"]
    },
    "typeRoots": ["./node_modules/@types"]
  },
  "exclude": ["node_modules"],
  "include": ["**/vite.config.mts", "**/*.d.ts", "**/*.ts", "**/*.tsx"]
}

package.json

{
  "name": "frontend-monorepo",
  "version": "1.0.0",
  "packageManager": "[email protected]",
  "private": true,
  "types": "./global.d.ts",
  "workspaces": [
    "app",
    "common/*"
  ],
}

Importing svg for a example raises an error:

  import Example from '@common/assets/example.svg?react';

  ERROR: Cannot find module '@common/assets/example.svg?react' or its corresponding type declarations.ts(2307)

Note: UI works as expected. Importing other components from @common works as expected. Just issues with declarations when importing from svg, png and other extensions