Forge with typescript is giving TS2304: Cannot find name 'ForgeUI'

Forge Forge UI Kit and Custom UI
, ,
1

Is there anyone worked and implemented forge application using typescript?
My configs are as below:
Manifest.yml:

modules:
  jira:issuePanel:
    - key: home-panel
      title: Home Panel
      icon: https://example.com/icon.png # Add a valid icon URL
      resource: main
      resolver:
        function: resolver
  function:
    - key: resolver
      handler: index.handler
resources:
  - key: main
    path: static
permissions:
  scopes:
    - read:jira-work
    - write:jira-work
    - storage:app
  content:
    styles:
      - unsafe-inline
    scripts:
      - unsafe-inline
app:
  id: ari:cloud:ecosystem::app/{userId}
  runtime:
    name: nodejs18.x

TSConfig:

{
  "compilerOptions": {
    "target": "es5",
    "useDefineForClassFields": true,
    "lib": ["es6", "dom"],
    "module": "commonjs",
    "skipLibCheck": true,
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "resolveJsonModule": true,
    "isolatedModules": false, // Set to false to allow emitting output
    "noEmit": false,          // Ensure TypeScript emits output
    "jsx": "react",
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "noImplicitAny": true,
    "noImplicitThis": true,
    "strictNullChecks": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

Index.ts:
import React, { Fragment } from 'react';
import Home from "./Home";

const Panel: React.FunctionComponent = function () {
  return (
    <Fragment>
      <Home />
    </Fragment>
  );
};

export default Panel;

Resolver.ts:

import Resolver from '@forge/resolver';
import { storage } from '@forge/api';

const resolver = new Resolver();

resolver.define('getText', async (req) => {
  try {
    const data = await storage.get('data');
    return data || 'Default text';
  } catch (error) {
    console.error('Storage error:', error);
    return 'Error retrieving data';
  }
});

export const handler = resolver.getDefinitions();