Injecting MobX State Tree store into react components throwing error

Question

Issue: I am getting an error when attempting to inject a MST store into react class component:

Error: Uncaught [Error: MobX injector: Store 'auth' is not available! Make sure it is provided by some Provider

the error stems from the LoginForm component posted below, and is nested under another component (not sure if this is the issue, as to say each component needs a <Provider>?)

component hierarchy:

Application (contains no Provider)
    |__ Authentication (contains no Provider)
        |__LoginForm

a little code:

import { AuthenticationStore } from './stores/AuthenticationStore'

const auth = AuthenticationStore.create()

ReactDOM.render(
  <Provider auth={auth}>
    <Application />
  </Provider>,
  document.getElementById('root')
);


//Application
const Application = inject('auth')(observer(class Application extends 
Component {
  render() {
    console.log(this.props.auth) // logs the store as expected
    return (
      <div className={styles.applicationContainer}>
        <Authentication/>
      </div>
    )
  }
}))

export default Application

// LoginForm
const LoginForm = inject('auth')(observer(class LoginForm extends Component {
  render() {
    return (
       <div></div>
    )
  }
}))

export default LoginForm

and to the question:

If not this, what is the preferred protocol for passing the store to child components (without passing as props)?

As always, thanks in advance for any and all input. If this is a duplicate (I couldn't find this particular error), please mark as such and I will update accordingly...