I am making a Typescript and React app. I am using 4 main files, App.tsx, Header.tsx, Ap.css. I think the real problem is the way I am trying to use the add the Header.tsx file to App.tsx.

Please help

App.tsx:

import React from "react";
import Header from "./Header";
import "./App.css";

function App() {
  return (
    <div className="App">
      <Header />
    </div>
  );
}

export default App;

Header.tsx:

import React from "react";
import "./Header.css";

function Header() {
  return (
    <div className="nav-container">
      <nav>
        <a href="#!">Home</a>
        <a href="#!">About</a>
        <a href="#!">Projects</a>
        <a href="#!">Resume</a>
      </nav>
    </div>
  );
}
export default Header;

App.css:

.App {
  text-align: center;
  color: white;
}

body {
  background-color: #171A25;
  color: #ffffff;
}

Header.css:

body {
    margin: 0px;
    background-color: #121625;
}
.nav-container {
    text-align: center;
    font-size: 24px;
    color: white;
}