How do I use destructing with importing in Javascript?

Question

I have the following:

SomeDirectory/index.js

import Foo from './foo';
import Bar from './bar';
import Baz from './baz';

export default {
  Foo,
  Bar,
  Baz,
};

And in my file, I want to just import like this:

SomeFile.js

import { Foo, Bar, Baz } from './SomeDirectory'

And then be able to use Foo, Bar, or Baz as is but instead I have to do:

import Container from './SomeDirectory'

and use it with Container.Foo