My project structure is like this:

jsconfig.json
next.config.json
components
   |_atoms
       |_Button.jsx
       |_Button.module.scss
       |_...
   |_...
...

and inside the jsconfig.json, I have this:

{
   "compilerOptions": {
      "baseUrl": ".",
      "paths": {
         "@/components/*": ["components/*"]
      }
   },

   "include": ["components/**/*", "api/**/*", "data/**/*", "pages/**/*", "utils/**/*"]
}

Next.js correctly imports the components and it's working, but on the developing side, autocomplete isn't working anymore!

for example, all of these import statements are working like a charm, but I manually wrote the path and autocomplete didn't help:

import Button from "components/atoms/Button";    //works
import Button from "@/components/atoms/Button";  //works
import Button from "../components/atoms/Button"; //works if the relative path is correct
import styles from "./Button.module.scss";       //works inside Button.jsx

So there's no problem with next js, but Path Intellisense isn't suggesting filenames anymore.
I renamed jsconfig.json to something else (to disable it) and this time, Path Intellisense works correctly, but next js can't import components.

How can I benefit from both? I want to have absolute imports and also use Path Intellisense.