ReactJS display return value from component class that extends React.Component

I have a component that I want to show in another site.

components/Hello.js

import React from 'react';

export default class Hello extends React.Component {
  
  render() {
    return (
      <div><p>Hello</p></div>
    )
  };
};

Now I want to import it into my site named "Profile.js".

pages/Profile.js

import React from 'react';
import Hello from '../components/Hello';

export default function Profile() {

  return(
    <div>
      {/* Say hello*/}
      {Hello}
    </div>
  );
}

What am I doing wrong? Why wont it say hello on my "Profile.js" page?

>Solution :

React syntax for rendering components is as follow :

export default function Profile() {
  return(
    <div>
      {/* Say hello*/}
      <Hello/>
    </div>
  );
}