Astro: Failed to load resource: the server responded with a status of 500 (Internal Server Error) and Problem with CSS in Astro Project

Question

So im just making a new astro project and i have integrations for svelte, react and also for tailwind css. Code is below:

Navbar.jsx:

import react from 'react';
import { BrowserRouter, Routes , Route} from 'react-router-dom';
import Home from "./Home.jsx"
import About from "./About.jsx"
import Blog from "./Blog.jsx";
import 'NavbarCSS'

export default function Navbar() {
    return (
        <BrowserRouter>
            <Routes>
                <Route path="/" element={<Home />} />
                <Route path="/about" element={<About />} />
                <Route path="/blog" element={<Blog />} />
            </Routes>
        </BrowserRouter>
    )
}

index.astro:

---
import Layout from "../layouts/Layout.astro";
import Navbar from "../components/React/Navbar"
---

<Layout>
    <Navbar />
</Layout>

I also need some help with the CSS and how i can actually apply it to the React Code im attempting to do it with a seperate css file Called NavbarCSS.css and importing it. Is it wrong to do that if so, What is the correct way to do it?

Also How do i fix the error in the title?