In JSX, the lower-case tag name is considered as html native component. In order to react recognise the function as React component, need to Capitalized the name.
Capitalized types indicate that the JSX tag is referring to a React component. These tags get compiled into a direct reference to the named variable, so if you use the JSX <Foo /> expression, Foo must be in scope.
https://reactjs.org/docs/jsx-in-depth.html#html-tags-vs.-react-components