Matched leaf route at location "/" does not have an element. This means it will render an <Outlet /> with a null value, so resulting in an empty page

the return statement gives a warning and addTodo & todos dont load. Switch is not supported anymore so I've replaced it with Routes but don't know how handle that return part

Does anybody know how do I solve this issue?

return (

 <>
  <Router>
    <Header title="To Do List" />

    <Routes>
      <Route exact path= "/" render={() => {
        return (
          <>
            <AddTodo addTodo = {addTodo} />
            <Todos todos = {todos} onDelete={onDelete} />
          </>
        )
      }
    }>
      </Route>
      <Route exact path = "/about" element = {<About/>} />
    </Routes>
    <Footer />
  </Router>
</>
);

Click to view warnings screenshot