Confused By NavigationStack Message and Navigation Behavior

Question

I am getting a lot of odd behavior with NavigationStacks and NavigationSplitView and am unclear why.

There are several things going on, different depending on portrait or landscape.

The sample app has three different Views each linked to the next. The expected behavior is to click a color which will display the color name. Click on the color name and you'll get a view with the color. In portrait mode it kind of works except the first selection displays the default detail which is just text telling you to select a color. Back up and select a color and everything works fine, back and forth.

In landscape mode, when I select a color I get the following on the console:

A NavigationLink is presenting a NavigationStack onto a column. This construction is not supported. Consider instead just presenting a new root view which will replace that of an existing stack in the column, or else the column itself if there is no NavigationStack in the target column. If there is a stack in the target column, appending to that stack's path is another option.

The app is hung up after that.

Here's the sample app.

import SwiftUI

struct ContentView: View
{
    @State var colors = "Red,Green,Blue,Orange,Purple".components(separatedBy: ",")
    var body: some View
    {
        NavigationSplitView
        {
            List()
            {
                ForEach(colors, id:\.self)
                {
                    color in
                    NavigationLink(color, value: color)
                }
            }.navigationDestination(for: String.self)
            {
                color in
                ColorView(color: color)
            }
        } detail:
        {
            Text("Detail View")
        }
        .padding()
    }
}

struct ColorView: View
{
    @State var color: String
    
    var body: some View
    {
        NavigationStack
        {
            List
            {
                NavigationLink(color, value: color).isDetailLink(true)
            }
                .navigationDestination(for: String.self)
                {
                    color in
                    ColorDisplay(color: color)
                }
        }
    }
}

struct ColorDisplay: View
{
    @State var color: String
    @State var newColor: Color = Color.black
    
    init(color: String)
    {
        _color = State(initialValue: color)
        switch(color)
        {
        case "Red":
            _newColor = State(initialValue: Color.red)
        case "Green":
            _newColor = State(initialValue: Color.green)
        case "Blue":
            _newColor = State(initialValue: Color.blue)
        case "Orange":
            _newColor = State(initialValue: Color.orange)
        default:
            _newColor = State(initialValue: Color.black)
            
        }
    }
    
    var body: some View
    {
        newColor
    }
}

#Preview {
    ContentView()
}

I've tried this with and without the .isDetailLink(false) modifier.

Where have I gone wrong?