Uploading/previewing HEIC images with Livewire

I'm working on an image upload page that shows a preview of the uploaded image with Livewire. I am using accept="image/*" on my HTML file element and it's showing HEIC images on my computer.

When I click on one of them, upload button appears (check the blade code below), but doesn't show the image preview. And when I click the upload button, I'm getting this error : "The image field must be an image"

	<input type="file" id="image" accept="image/*" class="hidden"/>

	@if($image)
		<label for="image" class="button">Click to select image</label>
	@else
		<img src="{{ $image->temporaryUrl() }}"/>
		<label for="image" class="button">Select another image</label>
		<button wire:click="uploadImage">Upload Image</button>
	@endif

I have published and edited my livewire config file as following, and manually included heic and heif formats in the preview_mimes array.

'temporary_file_upload' => [
        'disk' => null,
        'rules' => 'required|file|max:5120',
        'directory' => null,
        'middleware' => null,
        'preview_mimes' => [   // Supported file types for temporary pre-signed file URLs...
            'png', 'gif', 'bmp', 'svg', 'wav', 'mp4',
            'mov', 'avi', 'wmv', 'mp3', 'm4a',
            'jpg', 'jpeg', 'mpga', 'webp', 'wma', 'heic', 'heif'
        ],
        'max_upload_time' => 5,
        'cleanup' => true,
    ],