React-router set index route as active v6

I am trying to create a route with child routes.
When I navigate to "/" (no route) it should land on /weather (aka Home) and that works with Navigate.

Then the index child route shows correctly. But the Navlink do not get "active" in Weather.tsx.
And when I click "weather-forecast"-link it gets higlighted obviosly because the route then match.

But how do I have the tab active when index is the selected route?

Or maybe I have done something wrong with the setup of the routes?

App.tsx

const Header = styled.div`
    grid-area: header;
    nav {
        height: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    h1 {
        font-size: clamp(1rem, 4vw, 3rem);
        margin: 0;
        margin-left: 15px;
        color: #921267;
    }

    ul {
        list-style-type: none;
        display: flex;
        margin-right: 15px;
    }

    a {
        all: unset;
        cursor: pointer;
        &:hover {
            color: #205ad2;
        }
        &.active {
            color: #205ad2;
        }
    }

    ul li:last-child {
        margin-left: 10px;
    }
`;
    <Header>
                    <nav>
                        <h1>Weather App</h1>
                        <ul>
                            <li>
                                <NavLink to="weather">Weather</NavLink>
                            </li>
                            <li>
                                <NavLink to="about">About</NavLink>
                            </li>
                        </ul>
                    </nav>
                </Header>
                <MainContent>
                    <Suspense fallback="Loading...">
                        <Routes>
                            <Route path="" element={<Navigate to="weather" />} />
                            <Route path="weather" element={<Weather />}>
                                <Route index element={<WeatherForecast />} />
                                <Route path="weather-forecast" element={<WeatherForecast />} />
                                <Route path="my-weather-stations" element={<WeatherStations />} />
                            </Route>
                            <Route path="about" element={<About />} />
                        </Routes>
                    </Suspense>
                </MainContent>

Weather.tsx

const Wrapper = styled.div`
    margin-top: 20px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
    row-gap: 24px;
    ul {
        list-style-type: none;
        display: flex;
        padding: 0;
        margin: 0;
    }
    a {
        all: unset;
        cursor: pointer;
        padding: 12px;
        border: 1px solid #205ad2;
        border-bottom: none;
        border-radius: 8px 8px 0 0;
        &:hover {
            color: white;
            background-color: #205ad2;
        }
        &.active {
            color: white;
            background-color: #205ad2;
        }
    }

    ul li:last-child {
        margin-left: 5px;
    }
`;

    <Wrapper>
                <nav>
                    <ul>
                        <li>
                            <NavLink to="weather-forecast">Weather forcast</NavLink>
                        </li>
                        <li>
                            <NavLink to="my-weather-stations">My Weather Stations</NavLink>
                        </li>
                    </ul>
                </nav>
                <Outlet />
            </Wrapper>

>Solution :

Update the "/weather" index route to redirect to the "default" "tab" route.

Example:

<Routes>
  <Route path="*" element={<Navigate to="/weather" />} />
  <Route path="weather" element={<Weather />}>
    <Route path="weather-forecast" element={<WeatherForecast />} />
    <Route path="my-weather-stations" element={<WeatherStations />} />
    <Route index element={<Navigate to="weather-forecast" />} />
  </Route>
  <Route path="about" element={<About />} />
</Routes>