livewire.js?id=5d3e67e0:347 Uncaught TypeError: Cannot read properties of null (reading 'name')

Hello all I am working on a new project similar to youtube (laravel v10 & livewire v3) every user has one channel the issue is I am trying to update user Channel data but no data shows in livewire components and error message show on the console tab

"livewire.js?id=5d3e67e0:347 Uncaught TypeError: Cannot read properties of null (reading 'name')"

I have two tables of users & channels

This my code Route File

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\ChannelController;
Route::get('/', function () {
    return view('welcome');
});

Auth::routes();
Route::get('/home', [App\Http\Controllers\HomeController::class, 'index'])->name('home');
Route::middleware('auth')->group(function () {

    Route::get('/channel/{channel}/edit', [ChannelController::class, 'edit'])->name('channel.edit');
});

EditChannel livewire

<?php

namespace App\Livewire\Channel;
use Livewire\Component;
use App\Models\Channel;
use SebastianBergmann\Diff\Chunk;

class EditChannel extends Component
{
    public $channel;
    public $image;

    protected function rules()
    {

        return [

            'channel.name' => 'required|max:255|unique:channels,name,' . $this->channel->id,
            'channel.slug' => 'required|max:255|unique:channels,slug,' . $this->channel->id,
            'channel.description' => 'nullable|max:1000',
            'image' => 'nullable|image|max:1024',

        ];
    }


    public function mount(Channel $channel)
    {

        $this->channel = $channel;
    }
    public function render()
    {
        return view('livewire.channel.edit-channel');
    }

    public function update()
    {

        $this->validate();

        $this->channel->update([

            'name' => $this->channel->name,
            'slug' => $this->channel->slug,
            'description' => $this->channel->description,

        ]);

        session()->flash('message', 'Channel updated');

        return redirect()->route('channel.edit', ['channel' => $this->channel->slug]);
    }
}

edit-channel form

<div>
    @if($channel->image)
    <img src="{{ asset('images' . '/' . $channel->image)}}" alt="">
    @endif
    <form wire:submit.prevent="update">


        <div class="form-group">
            <label for="name">Name</label>
            <input type="text" class="form-control" wire:model="channel.name">
        </div>

        @error('channel.name')
        <div class="alert alert-danger">
            {{ $message }}
        </div>
        @enderror

        <div class="form-group">
            <label for="slug">Slug</label>
            <input type="text" class="form-control" wire:model="channel.slug">
        </div>

        @error('channel.slug')
        <div class="alert alert-danger">
            {{ $message }}
        </div>
        @enderror

        <div class="form-group">
            <label for="description">Description</label>
            <textarea cols="30" rows="4" class="form-control" wire:model="channel.description"></textarea>
        </div>

        @error('channel.description')
        <div class="alert alert-danger">
            {{ $message }}
        </div>
        @enderror

        <div class="form-group">
            <label></label>
            <input type="file" wire:model="image" class="form-control">
        </div>

        <div class="form-group">
            @if ($image)
            Photo Preview:
            <img src="{{ $image->temporaryUrl() }}" class="img-thumbnail">
            @endif
        </div>

        @error('image')
        <div class="alert alert-danger">
            {{ $message }}
        </div>
        @enderror

        <div class="form-group">
            <br>
            <button type="submit" class="btn btn-primary">Update</button>
        </div>

        @if(session()->has('message'))
        <div class="alert alert-success">
            {{ session('message')}}
        </div>
        @endif

    </form>
</div>

Main Edit File

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">{{ __('Channe') }}</div>

                <div class="card-body">
                    <livewire:channel.edit-channel :channel="$channel" />
                </div>
            </div>
        </div>
    </div>
</div>
@endsection