How to pass the product color information to the checkout in Laravel

Please I need help on passing the product color attribute to the checkout page for a project I am working on.
I am working with Laravel 9 and Livewire.

I have been able to display the product colors from the DB information in the product details page, but I have no clue on how to pass the selected product color when the product is added to cart to the checkout page for order confirmation.

This is what the product details looks like

product-details.blade.php

<h2>{{ $product->name }}</h2>
<div class="price-box pt-20">
<span class="new-price new-price-2">₦
<span class="text-danger">
{{ number_format((float) $product->price, 2) }}
</span>
</span>
</div>
<div class="">
<span class="new-price">
<p>
<span class="float-left">
<label for="color"> Select Colour: </label>
</span>
<select class="nice-select" name="color">
@foreach ($colors as $color)
<option value="{{ $color }}">{{ $color }}</option>
@endforeach
</select>
</p>
</span>
<br>
</div>
<br>
<div style="margin-bottom: 50px;"></div>
<div class="product-desc">
<p>
<span>{!! $product->description !!}</span>
</p>
</div>

checkout.blade.php

@if ($cart_count>0)
<div class="col-lg-6 col-12">
<div class="your-order">
<h3>Your order details</h3>
<div class="your-order-table table-responsive">
<table class="table">
<thead>
<tr>
<th class="cart-product-name">Product</th>
<th class="cart-product-total">Total</th>
</tr>
</thead>
<tbody>
@foreach(\Gloudemans\Shoppingcart\Facades\Cart::content() as $product)
<tr class="cart_item">
<td class="cart-product-name">
{{ $product->name }} | {{ $product->colour }}
<strong class="product-quantity"> × {{$product->qty}}</strong>
</td>
<td class="cart-product-total">
<span class="amount">₦{{$product->price}}</span>
</td>
</tr>
@endforeach
</tbody>
<tfoot>
<tr class="cart-subtotal">
<th>Cart Subtotal</th>
<td>
<span class="amount">₦ {{ $subtotal }}</span>
</td>
</tr>
<tr class="cart-subtotal">
<th>Cart Tax</th>
<td>
<span class="amount">₦ {{ $tax }}</span>
</td>
</tr>
<tr class="order-total">
<th>Order Total</th>
<td>
<strong>
<span class="amount">₦ {{ $total }}</span>
</strong>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>

Of course, I am using Gloudemans Shoppingcart.
This is what my product details livewire component looks like

ProductDetails.php

class ProductDetails extends Component
{
use WithPagination;
protected $paginationTheme = 'bootstrap';
public $productid, $category, $colors, $sizes;
public $product, $quantity, $productquantity;
public function render()
{
return view('livewire.product-details', [
'productfromcats'=> Product::where('category', '=', $this->category)
->orderByRaw('created_at DESC')
->paginate(8, ['*'], 'catsPage'),
]);
}
public function mount($product_id)
{
$this->product = Product::where('product_id', '=', $product_id)->get()->first();
$this->colors = $this->product->colour;
$this->sizes = $this->product->size;
$search = Cart::search(function ($cartItem, $rowId) use ($product_id) {
return $cartItem->id === $product_id;
});
if ($search->count() > 0) {
$cartproduct = $search->first();
$this->productquantity = $cartproduct->qty;
} else {
$this->productquantity = 0;
}
}
public function addItemToCart($item, $qty)
{ 
$cartItem = Cart::add(
[
'id' => $item['id'],
'name' => $item['name'],
'qty' => $qty,
'price' => $item['price'],
'weight' => 0,
'options' => [
'size' => $item['size'],
'colour' => $item['colour'],
'images' => $item['images']
]
]
);
$cartItem->associate('\App\Models\Product');
$this->productquantity = Cart::get($cartItem->rowId)->qty;
if (Cart::get($cartItem->rowId)->qty == 0) {
Cart::remove($cartItem->rowId);
}
$this->emit('cart_updated');
}
}

You are trying to access the colour of the product directly.

<td class="cart-product-name">
{{ $product->name }} | {{ $product->colour }}
<strong class="product-quantity"> × {{ $product->qty }}</strong>
</td>

Instead access the colour using the options as stated in the documentation

{{
$product->options->has('colour')
? is_array($product->options->colour)
? ' | ' . implode(", ", $product->options->colour)
: ' | ' . $product->options->colour
: ''
}}