Video Preview Not Updating After Upload in Livewire Component Despite URL Change

I'm working on a Laravel project using Livewire and am trying to update the video preview after uploading a new video file. The temporary URL of the video file changes correctly after upload, but the video in the element does not update even though the URL reflects the new file.

Here’s my Livewire component and Blade template:

Livewire Component

<?php

namespace App\Livewire;

use App\Models\Video;
use Livewire\Attributes\Validate;
use Livewire\Component;
use Livewire\WithFileUploads;

class VideoEdit extends Component
{
    use WithFileUploads;

    public $video;

    #[Validate]
    public $title;

    #[Validate]
    public $description;

    #[Validate]
    public $video_file;

    public function removeImage()
    {
        $this->video_file = null;
    }

    protected function rules()
    {
        return [
            'title' => 'required|string|min:3|max:255',
            'description' => 'nullable|string|min:3|max:255',
            'video_file' => 'nullable|file|mimes:mp4,avi,mov|max:1073741824',
        ];
    }

    public function mount(Video $video)
    {
        $this->video = $video;
        $this->title = $video->title;
        $this->description = $video->description;
    }

    public function update()
    {
        dd($this->video_file);
        $this->video->update([
            'title' => $this->title,
            'description' => $this->description,
        ]);
    }

    public function render()
    {
        return view('livewire.video-edit');
    }
}
`#0969DA`

my livewire blade

<div>
    <div class="py-2">
        @if ($errors->any())
            @foreach ($errors->all() as $error)
                <x-alert type="danger" :message="$error" />
            @endforeach
        @endif
    </div>
    <form wire:submit.prevent="submit" enctype="multipart/form-data">
        <div class="row gy-3">
            <div class="col-12">
                <label class="form-label mt-3">Video</label>
                <div class="upload-image-wrapper d-flex align-items-center gap-3">
                    <div class="uploaded-img position-relative input-form-light radius-8 overflow-hidden"
                        style="width: 250px; border-radius: 16px;height: 120px;">
                        <button type="button" wire:click="removeImage"
                            class="uploaded-img__remove position-absolute top-0 end-0 z-1 text-2xxl line-height-1 me-8 mt-8 d-flex">
                            <iconify-icon icon="radix-icons:cross-2" class="text-xl text-danger-600"></iconify-icon>
                        </button>
                        <video id="uploaded-video__preview" class="w-100 h-100 object-fit-cover" controls="">
                            <source
                                src="{{ $video_file ? $video_file->temporaryUrl() : $video->getFirstMediaUrl('videos') }}"
                                type="video/mp4">
                            Your browser does not support the video tag.
                        </video>
                    </div>
                    <label
                        class="upload-file h-120-px w-120-px border input-form-light radius-8 overflow-hidden border-dashed bg-neutral-50 bg-hover-neutral-200 d-flex align-items-center flex-column justify-content-center gap-1"
                        for="upload-file">
                        <iconify-icon icon="solar:camera-outline" class="text-xl text-secondary-light"></iconify-icon>
                        <span class="fw-semibold text-secondary-light">Upload</span>
                        <input id="upload-file" wire:model.live="video_file" type="file" accept="video/*" hidden>
                        <div wire:loading wire:target="video_file">Uploading...</div>
                    </label>
                </div>
                <p class="text-sm mt-1 mb-0">If You Upload a New Video, then old Video will be deleted</p>
                <p class="text-sm mt-1 mb-3">The New Image Should be Less than 1GB.</p>
            </div>
            <div class="col-12">
                <label class="form-label">Title</label>
                <input type="text" wire:model.blur="title" class="form-control" placeholder="Title">
            </div>
            <div class="col-12">
                <label class="form-label">Description</label>
                <textarea name="description" wire:model.blur="description" class="form-control" cols="10" rows="2"
                    placeholder="Description"></textarea>
            </div>
            <div class="col-12">
                <button type="submit" class="btn btn-primary-600">Add</button>
            </div>
        </div>
    </form>
</div>
`#0969DA`

please help me with this