создать-реагировать-приложение с машинописным шрифтом Не удается разрешить пользовательский модуль

Question

Я пытаюсь объединить все пользовательские типы для моего проекта.

структура проекта

./
├── node_modules/                     
├── public/                   
├── src/                      
|    ├── @types/           # aggregation for my custom type
|    |   └── index.d.ts    # my all custom types
|    ├── component/          
|    ├── ...            
|    ├── serviceWorker.ts
|    └── setupTest.ts     
├── .gitignore
├── ... 
└── yarn.lock                     

src/@types/index.d.ts

declare module 'Test' {
    export const test = "test";
    export enum scroll {
        up = 'scroll-up',
        down = 'scroll-down',
    }
}

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": false,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react",
    "typeRoots": [
      "./src/@types",
      "./node_modules/@types"
    ]
  },
  "include": [
    "src"
  ]
}

в src/component/Header/Header.tsx, я хочу использовать scroll enum в src/@types/index.d.ts

import * as React from 'react';
import {FunctionComponent, useEffect, useRef, useState} from 'react';

// i want to use enum scroll like this
// import {scroll} from 'Test';
import {test} from 'Test';
console.log(test);


export const Header: FunctionComponent = function () {
    // ...
};

и получить ошибку

Module not found: Can't resolve 'Test' in '/Users/~/src/component/Header'

typeRoots prop для node_modules/@types работает правильно. но почему typeRoots prop для нестандартного типа не работает в tsconfig.json? Что я могу сделать для абсолютного импорта пользовательского модуля?