Go to definition does not work in Vscode for the components declared inside index.jsx

I have a component named Messages defined inside this path: components/src/components/common/messages/index.jsx like the below image

I imported the Messages component as shown below image

When I use Ctrl + click on the component name in the import statement, it goes to the place where it is used. In the place where it is used When I use Ctrl + click on the component name, it goes back to the import statement. Let’s see the image below

I added a jsconfig.json file into my project, this is its content:

{
    "compilerOptions": {
        "baseUrl": "./components/src",
        "module": "es6",
        "jsx": "react"
    },
    "include": [
        "./components/src"
    ]
}

I can use Ctrl + Click to go to the definition of the Messages component if I update the above import statement from src/components/common/messages to src/components/common/messages/index. But I don’t want to do it. This way of importing worked with this command npx webpack serve -c config/webpack.serve.js, but it doesn’t work with Go to definition command of vscode. Does anyone know how to configure the project to be able to use Go to definition command of vscode with this way of importing?