React class component name strange behavior

Question

I am new to react so forgive me if this question it sounds stupid. Importing my new component MyComp in the App.js like the code below it works just fine, but when I import my component with a lower case like import testcomp from "./newComp"; and use it like <testcomp /> it shows nothing.

So, does react needs the name of the component imported to be capitalized at the 1st letter, or is it some kind of bug? I am using react v17.0.2

import React from "react";
import "./App.css";
import TestComp from "./newComp";

    function App() {
      return (
        <div className="App">
          <h1>Welcome</h1>
          <TestComp />
        </div>
      );
    }
    
    export default App;

And my Component

import React from "react";
// import { connect } from "react-redux";

class MyComp extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      message: "Subscribe to Simplelearn",
    };
  }

  styles = {
    fontSize: "italic",
    color: "purple",
  };

  ButtonChange = () => {
    this.setState({
      message: "Thank you for Subscribing",
    });
  };

  render() {
    return (
      <div className="myButton">
        <h3 style={this.styles}>{this.state.message}</h3>
        <button onClick={this.ButtonChange}>Subscribe</button>
      </div>
    );
  }
}

export default MyComp;