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>

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>