React-router v6 showing two routes at the same time

Question

I have this code right here and i was following the react-router v6 example, but in the code below the routes is rendering two route(the <Dashboard/> and the Hello page on App start).

<Routes>
        <Route path='/' element={<div><Outlet/></div>}>
          <Route index element={<div>hello</div>}/>
          <Route path="dashboard" element={<Dashboard />} />
          <Route path="login" element={<Login />} />
        </Route>
      </Routes>

It works fine when i go to localhost/dashboard and localhost/login, but i want it to render the hello screen when it starts meaning at 'localhost/'. And why can't my code work?

Thank you in advance.