Custom Reusable Color Picker not updating colors in other views

Question

The following code successfully shows a set of colors and displays the selected color when the colors are tapped, similar to the standard ColorPicker. What I would like to be able to do is use this custom color picker in other views, in a similar way as the standard ColorPicker. My issue is that I cannot expose the selected color to other views.

ContentView:

    struct ContentView: View {
        var body: some View {
            VStack{
            CustomColorPicker()
            }
        }
    }

Custom Color Picker:

    struct CustomColorPicker: View {
        var colors: [UIColor] = [.red, .green, .blue, .purple, .orange]
        
        @State var selectedColor = UIColor.systemGray6

        var body: some View {
            VStack {
                Rectangle()
                    .fill(Color(selectedColor))
                    .frame(width: 45, height: 45)
                
                HStack(spacing: 0) {
                    ForEach(colors, id: \.self) { color in
                        Button {
                            selectedColor = color
                        } label: {
                            Color(color)
                                .border(Color.gray, width: color == selectedColor ? 2 : 0)
                        }
                    }
                }
                .frame(height: 50.0)
            }
        }
    }

I have tied using a model/ObservableObject to be able to capture the selected color in other views but it doesn't when you select the colors.

How can I make the Rectangle in ContentView update its fill color when a color in the color picker is tapped?

Or in general, what would be the best way to create a reusable custom color picker?

Using an ObservableObject

Content View

    struct ContentView: View {
        
        @ObservedObject var cModel = ColorPickerModel()
        
        var body: some View {
            VStack{
            CustomColorPicker()
                
                Rectangle()
                    .fill(cModel.selectedColor)
                    .frame(width: 100, height: 100)
            }
        }
    }

Custom Color Picker

    class ColorPickerModel:ObservableObject{
        @Published var selectedColor:Color = Color.orange
    }

    struct CustomColorPicker: View {
        var colors: [UIColor] = [.red, .green, .blue, .purple, .orange]
        
        @StateObject var cModel = ColorPickerModel()

        var body: some View {
            VStack {
                Rectangle()
                    .fill(cModel.selectedColor)
                    .frame(width: 45, height: 45)
                
                HStack(spacing: 0) {
                    ForEach(colors, id: \.self) { color in
                        Button {
                            cModel.selectedColor = Color(color)
                        } label: {
                            Color(color)
                                //.border(Color.gray, width: color == selectedColor ? 2 : 0)
                        }
                    }
                }
                .frame(height: 50.0)
            }
        }
    }

Answer 1

import SwiftUI

struct MyColorView: View {
    //Source of truth
    @StateObject var cModel = MyColorViewModel()
    
    var body: some View {
        VStack{
            CustomColorPicker(selectedColor: $cModel.selectedColor)
            
            Rectangle()
            //Convert to the View Color
                .fill(Color(cModel.selectedColor))
                .frame(width: 100, height: 100)
        }
    }
}
//This will serve as the source of truth for this View and any View you share the ObservableObject with
//Share it using @ObservedObject and @EnvironmentObject
class MyColorViewModel:ObservableObject{
    //Change to UIColor the types have to match
    @Published var selectedColor: UIColor = .orange
}
struct CustomColorPicker: View {
    var colors: [UIColor] = [.red, .green, .blue, .purple, .orange]
    //You can now use this Picker with any Model
    //Binding is a two-way connection it needs a source of truth
    @Binding var selectedColor: UIColor
    
    var body: some View {
        VStack {
            HStack(spacing: 0) {
                ForEach(colors, id: \.self) { color in
                    Button {
                        selectedColor = color
                    } label: {
                        Color(color)
                            .border(Color.gray, width: color == selectedColor ? 2 : 0)
                    }
                }
            }
            .frame(height: 50.0)
        }
    }
}
struct MyColorView_Previews: PreviewProvider {
    static var previews: some View {
        MyColorView()
    }
}

Try the Apple SwiftUI Tutorials they are a good start.