How to set react typescript paths alias with craco

Question

I want to use craco to specify a path alias. My error is Cannot find module '@/ui/Item' or its corresponding type declarations.

The file path looks like this

[...] which means a folder.

• [components]
  • [ui]
    • Items
• [pages]
  • Page
• tsconfig.paths.json
• craco.config.js

This is tsconfig.paths.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "src/*"
      ],
      "@/pages": [
        "src/pages/*"
      ],
      "@/api": [
        "src/api/*"
      ],
      "@/assets": [
        "src/assets/*"
      ],
      "@/styles": [
        "src/styles/*"
      ],
      "@/components": [
        "src/components/*"
      ],
      "@/ui": [
        "src/components/ui/*" // This path is not working
      ],
      "@/types": [
        "src/types/*"
      ],
    },
  }
}

This is craco config

const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');

module.exports = {
  plugins: [
    {
      plugin: {
        overrideWebpackConfig: ({ webpackConfig }) => {
          webpackConfig.resolve.plugins.push(new TsconfigPathsPlugin({}));
          return webpackConfig;
        },
      },
    }
  ],
};

This is page.tsx

import { ItemsProps } from '@/types/items'
import Item from '@/ui/Item' // This part!!!

function Page({ Items, tab }:ItemsProps) {
  return (
    <div>
      {Items.get(tab)?.map((item) => (
        <Item key={item.name} item={item} />
      ))}
    </div>
  )
}
export default Page

Please lend me your wisdom