I’m a beginner and working on a react project that has a component named “restaurant” that i want to render it in my “App” component. Even though I have imported the “restaurant” component and included it in my “App” component, it is not rendering and I’m not sure why

Here is my App.jsx file:
import React from ‘react’
import restaurant from ‘./component/basics/restaurant’;
const App = () => {

  return(
    <>
    hello world
    <restaurant />
    </>
  );

};

export default App;

Here is my restaurant.jsx file:
import React from ‘react’

const restaurant = () => {
  return (
    <>
    <h>Hello restaurant </h>
    </>
  );

}

export default restaurant;

and here is my main.jsx file:
import React from ‘react’
import ReactDOM from ‘react-dom/client’
import App from ‘./App.jsx’

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

The “restaurant” component is not rendering, are there any other reasons why a component might not render even if it is imported and included in jsx?

I have checked the following:
.the path file in the import is correct
.the component is named correctly
.the “restaurant” component is correctly exported
Despite these checks, only the “App” component is rendering and the “restaurant” component is still not rendering, are there any other reasons why a component might not render even if it is imported and included in jsx?