Visual Studio Code doesn't autoimport from the library root

Question

I'm working on a React app that uses the Elastic UI component library. I started a new project with create-react-app and installed the needed eui dependencies.

When I try to add a new component, VSC does pick it up in the autocomplete and fills up the import like so:

import { EuiPage } from '@elastic/eui/src/components/page/page'
import React from 'react'

function App() {
  return (
    <div className="App">
      <EuiPage></EuiPage>
    </div>
  );
}
export default App;

But when that happens and I save, the application fails to compile and the live server crashes.

I've found that if I replace the import with

import { EuiPage } from '@elastic/eui'

all works fine, but the default behavior still causes me to crash and have to manually correct or to manually import all the components. How can I set it up so all the imports from elastic always look like that?

PS: This is the message I'm left with in the console once it crashes

Compiling...
/home/path/To/Project/ProjectName/node_modules/react-scripts/scripts/start.js:19
  throw err;
  ^

[Error: ENOENT: no such file or directory, stat '/home/user/.steampath'] {
  errno: -2,
  code: 'ENOENT',
  syscall: 'stat',
  path: '/home/user/.steampath'
}
error Command failed with exit code 1.

And this the one that appears in the browser

Failed to compile

./src/App.js
Module not found: Can't resolve '@elastic/eui/src/components/page/page' in '/home/path/To/Project/ProjectName/src'