How to change structure of React .js with Typescript

Question

I made CRA project with --typescript and did try use react-app-rewired for change structure for like this:

my-app/
├─ .gitignore
├─ node_modules/
├─ public/ ...
├─ src/
│  └─ components/
|     └─ My-Component
|        └─ Index.tsx
|        └─ Index.test.tsx
|     ...
├─ docs/
|  └─ App.tsx // and here use My-Component
|  └─ Index.tsx
├─ package.json
├─ tsconfig.json

Do you have any solution on how to do it? All-time i have problem with import Index.tsx and App.tsx from docs/ folder. Also I did try set entry file entry: "./docs/index.tsx", in config-overrides.js in Webpack config, but The best effect I was get loading Index.tsx but App.tsx show me an error.

App.tsx error

const path = require('path');
const {
    getLoader,
    injectBabelPlugin
} = require("react-app-rewired");
const HtmlWebpackPlugin = require('html-webpack-plugin');


module.exports = {
  // The Webpack config to use when compiling your react app for development or production.
  webpack: (config, env) => {
    config = {
      mode: 'development',
      entry: './docs/index.tsx',
      resolve: {
        extensions: ['.tsx', '.ts', '.js']
      },
       module: {
        rules: [
          {
            test: /\.(tsx)$/,
            exclude: /node_modules/,
            use: ['babel-loader']
          },
        ]
      },
      plugins: [
        new HtmlWebpackPlugin({
          template: 'public/index.html'
        })
      ]

    };
    return config;
  }
};

The structure must be preserved in this way because I wanted to convert an existing old project for CRA with TS

Any other ways how to change structure of files in CRA?