tsConfig paths not resolved with react typescript

Question

I started a new react application (where I need to include typescript) following this instruction:

npx create-react-app my-app --template typescript

then I copied an old folder structure where I just used js to this project. So I ended up with something like this:

also with that command it generated for me a tsconfig file where I added some alias paths to /components, /services and /utils

This is my tsConfig file:

{
  "compilerOptions": {
    "target": "es5",
    "baseUrl": "./src",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "strictNullChecks": false,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "paths": {
      "@components/*": ["./components/*"],
      "@utils/*": ["./utils/*"],
      "@services/*": ["./services/*"]
    }
  },
  "include": ["src"]
}

then when I try to import my components in the app.tsx as this:

import PokeTable from "@components/pokeTable/pokeTable";

function App() {
  return (
    <div className="App">
      <PokeTable></PokeTable>
    </div>
  );
}

export default App;

I get the following errors:

Compiled with problems:

ERROR in ./src/App.tsx 4:0-56

Module not found: Error: Can't resolve '@components/pokeTable/pokeTable' in 'C:\Users\Utilizador\Desktop\pokemonproject\src'

Tried to change the paths and also recreated a new ts application using the typescript template, anyone knows why this occurs and what can I do to solve this?

Thank you all!