How do i render my own html code after creating a react app

Question

I created a react app using the create-react-app app-name on vs code and I'm trying to display my own code in the browser. I've noticed that the index.js file renders the App.js code, I imported my own class which is the test class from the homepage in the index.js file here. My test class is in a js file called homepage which is inside a file called components

import test from './components/homepage';

Then I try replacing the App / with my own class in the reactDOM.render function here

original

ReactDOM.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>,
    document.getElementById('root')
);

After modification

ReactDOM.render(
  <React.StrictMode>
    <test />
  </React.StrictMode>,
  document.getElementById('root')
);

when I refresh the development server (the tab which react opens I write npm start) none of my html code in the test class displays. I'm relatively new in react so sorry if this seems kind of basic

Full code in the test class

import  React from 'react';
class test extends React.Component()
{
  constructor(props)
  {
      super(props);
      const current = new Date();
      this.state={
      //date: `{current.getDate()}/${current.getMonth()+1}/${current.getFullYear()}`
      };
  }
    
    render(){
        return(
            <div>
                <h1>Tempthelete</h1>
                <br></br>
                <br></br>
                <div id="d1">
                    <h2>London</h2>
                    <h3></h3>
                    <table>
                        <tr>
                            <td>image</td>
                            <td>Temprature</td>
                        </tr>
                        <tr>
                            <td>weather descriptiom</td>
                            <td>High and low tempratures</td>
                        </tr>
                    </table>
                    <br></br>
                    </div>

            </div>
        );
    };
}
export default test;

Full index.js code

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import test from './components/homepage';

ReactDOM.render(
  <React.StrictMode>
    <test />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. 
reportWebVitals();