How to use interfaces from a .d.ts file outside the current project through project references in TypeScript?

Question

I am new to TypeScript. I am working on a React frontend and Express backend project. My project folder structure is like the following:

server/
├─ src/
│  ├─ index.d.ts
│  ├─ someFile.ts
├─ tsconfig.json
web/
├─ src/
│  ├─ index.d.ts
├─ tsconfig.json

I am trying to use some interfaces delcared in web/src/index.d.ts inside of a file in server/src/someFile.ts. I have looked at TypeScript project references but I am not sure how to use it. What I have done right now is the server/tsconfig.json file:

{
  "compilerOptions": {
    ...
  },
  "include": ["src"],
  "references": [
    {
      "path": "../web"
    }
  ]
}

the web/tsconfig.json file:

{
  "compilerOptions": {
    ...,
    "composite": true,
    "declaration": true,
    "declarationDir": "./types",
    "declarationMap": true
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }] // This is from using Vite
}

and finally my web/src/index.d.ts file:

declare module "web-types" {
    export interface Foo {
        bar: string
    }
}

Now when I try to import an interface from web/src/index.d.ts inside of server/src/someFile.ts like:

import { Foo } from "web-types"

export const someFunction = (param: Foo) => {
    ...
}

It gives me the error: Cannot find module 'web-types' or its corresponding type declarations.ts. How can I fix this?