Cannot add component in React

I am trying to add footer.js in my react App.js

This is my app.js.

import React, { Component } from "react";
import "./App.css";

import Navbar from "./Navbar";
class App extends Component {
  render() {
    return (
      <div className="App">
        <BrowserRouter>
          <div>
            <Navbar />    
            <Switch>
              <Route path="/" exact component={Home} />
              <Route path="/SignIn" component={SignIn} />
            </Switch>
            <navfooter />
          </div>
        </BrowserRouter>
      </div>
    );
  }
}

export default App;

In my App.js file, I have used NavBar and it is working fine. I am using the same concept to add footer.js file in App.js file. I could also try using a pre-built footer file, but I wanted my own footer file. this is my footer.js

import React from "react";

const navfooter = (props) => {
  return (
    <div>
      <p>footer</p>
    </div>        
  );
};

export default navfooter;

And it shows like this:

My code editor, VS Code is not showing any errors or warnings. But the console shows an error:

SO what am I doing wrong?