How to render component inside other component with React

So currently I'm trying to start a react app, and create my own components.

Inside TimeChooser.js

import React from 'react';

function timeInput(){
    return(
      <div>
      <p>Test</p>
      <input type='time'></input>
      </div>
    )
}

class TimeChooser extends React.Component {
  render(){
    return (
      <div className='TimeChooser'>
        <h2>Choose what time you want to play pool</h2>
        <timeInput/>
      </div>
    );
  }
}

export default TimeChooser;

Inside Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import TimeChooser from './TimeChooser';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<div>
  <App />
  <TimeChooser />
  </div>, document.getElementById('root'));
registerServiceWorker();

So Currently, when I go to the main page on my app, TimeChooser will render on the page, but the timeInput() will not, I'm pretty new to React and JS in general, sorry if this is a dumb question or I missed something.

UPDATE Nevermind! I'm an idiot and the component needs to be capitalized like TimeInput() and <TimeInput/>