Having issues with importing components in Javascript (./navbar)

Question

Hello I am new to stack overflow and even JS so sorry in advance if i get something wrong.

So i am having issues with trying to import a navbar from daisyUI, I made a file called navBar.js and i wrote this:

const navbar = () => {
    return (
        <div className="navbar bg-primary text-primary-content">
            <a className="btn btn-ghost normal-case text-xl">daisyUI</a>
        </div>
    );
}

export default navbar;

and for my app.js file:

import navBar from "./navBar";
import './App.css';
import {useState, useEffect} from "react";
import {db} from "./firebase-config"
import {collection, getDocs, addDoc} from "firebase/firestore";

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

export default App;

the issue is that the server shows a blank file. I have two errors:

ERROR in ./src/App.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /src/App.js: Unexpected token, expected "..." (10:10)

   8 |   return (
   9 |       <div className="flex"{
> 10 |           <navBar />
     |           ^
  11 |       </div>
  12 |       }
  13 |   );

And

ERROR in [eslint] 
src/App.js
  Line 10:10:  Parsing error: Unexpected token, expected "..." (10:10)

Can someone please help me with this? I honestly searched around and couldn't find nothing.

Thank you

I tried searching online for some form of help. I was following this tutorial on youtube as well. text