Why are separate .jsx file not being included when using react in my metor.js app

Question

I have been working on a meteor.js and react.js app using meteor-react and flow-router.

I Started with a structure like this:

• client
  • components
    • register.jsx
  • layouts
    • header.jsx
    • footer.jsx
  • lib
    • router.jsx main.html main.jsx

in my router.jsx file I cal the RegisterForm class from the register.jsx file

FlowRouter.route('/', {
    action() {
        ReactLayout.render(MainLayout, { content: <RegistrationForm /> });
    }

});

This works well as long as all my component classes are in the register.jsx file but as my project is getting bigger, instead of putting all classes in a single file I want to split register.jsx into separate .jsx files.

For example, I have a class called VerifiedInput which contains extra functionality for custom validation of input fields. If I include this class in the same register.jsx I can call it in the render function of my RegisterForm Class,

VerifiedInput = React.createClass({
    ....
});

RegistrationForm = React.createClass({
   ....    
   render : function(){
       return(
           <VerifiedInput />
        )
    }
});

but if I move the VerifiedInput class into a separate file so my component folder structure changes to :

- components
   - register.jsx
   - validinput.jsx

then I get an error: ReferenceError: VerifiedInput is not defined

Which seems to suggest the .jsx file is not being included.

As I undertand it meteor should include files in the client folder automatically and its not possible to use require() Meteor.js

How do I make sure react classes in separate files are included?