Введите '{children: never []; } »не имеет свойств, общих с типом IntrinsicAttributes. TypeScript + React Error при попытке визуализации пользовательского интерфейса материала

Question

В настоящее время я пытаюсь отобразить простую навигационную панель из пользовательского интерфейса материала на моей домашней странице. В настоящее время я создал файл Navbar.tsx и пытаюсь вызвать созданную мной константу Navbar. Я столкнулся с ошибкой этого типа.

Вот мой файл Navbar.tsx:

import React from 'react';

import '../styles/components/HomePageComponent.scss';
import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
import {AppBar, Toolbar, Typography} from '@material-ui/core/';


const Navbar = () =>  {
  
  return(
    <AppBar>
        <Toolbar>
            <Typography>This is our header! </Typography>
        </Toolbar>
    </AppBar>
  );
    
};

export default Navbar;

А вот мой HomePageComponent.tsx

import React from 'react';
import '../styles/components/HomePageComponent.scss';
import Navbar from './Navbar';

function HomePageComponent() {
  
  return <div>
    <Navbar> //Error Underline occurs here
    </Navbar>
    
    </div>;
}

export default HomePageComponent;