How to make one child the default one when using in react router?

Question

I have the following route setup in App.js

<BrowserRouter>
  <Routes>
    <Route path="/" element={<HomeLayout />}>
      <Route path="/my-course" element={<MyCourse />} />
      <Route path="/all-course" element={<AllCourse />} />
      <Route path="/dashboard" element={<Dashboard />} />
    </Route>
  </Routes>
</BrowserRouter>

inside HomeLayout there is a

1. sidebar that containes link to other routes
2. <Outlet> to hold the contetnt of the other three routes

the problem is when I access / only the sidebar is shown but I want MyCourses to be the default one and displayed on accessing /

I have tried two solutions

1.

<BrowserRouter>
  <Routes>
    <Route path="/" element={<HomeLayout />}>
      <Route path="/" element={<MyCourse />} />
      <Route path="/my-course" element={<MyCourse />} />
      <Route path="/all-course" element={<AllCourse />} />
      <Route path="/dashboard" element={<Dashboard />} />
    </Route>
  </Routes>
</BrowserRouter>

on this one the the content displays but the url doesn't change (the url doesn't change to localhost:3000/my-course it stays on localhost:3000 )

2.

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Navigate to="/my-courses" />}>
      <Route path="/" element={<MyCourse />} />
      <Route path="/my-course" element={<MyCourse />} />
      <Route path="/all-course" element={<AllCourse />} />
      <Route path="/dashboard" element={<Dashboard />} />
    </Route>
  </Routes>
</BrowserRouter>

in this cases (on the above case as well) when the I am on /dashboard and hit refresh the page goes to /my-course

how can i make my-course the default child and preserve path on refresh