Livewire - File Upload not working

Wondering if I could get some insight on why the file upload function may not be working for me.

I have a modal form with a file upload section. When I select a file, the file name is filled out; however, if I go back and change another field in the form, the file upload section gets changed back to"no file chosen".

If I reselect the image file to upload and click the Create button, it states that the "The file must be an image.".

The file seems to never upload to the server. When I peek at the livewire instance in Google Chrome, the variable I'm referencing for the file input is still null.

I am including:

    @livewireStyles

In the head tag

and:

    @livewireScripts

in the end of the body tag.

Below are my code snippets:

Livewire Controller

use Livewire\WithFileUploads;
...
class AddImage extends Component
{
    use WithFileUploads;
     $this->markerImage = null;
    protected $rules = [
        'markerImage' => 'image|mimes:png|dimensions:max_width=100,max_height=100|max:4096'
    ];
....
    public function addMapMarker()
    {
        $this->validate();
        dd("SUCCESS");
     }
}

Blade Snippet:

                                <div class="row mb-2">
                                        @if ($markerImage)
                                            Photo Preview:
                                            <img src="{{ $markerImage->temporaryUrl() }}">
                                        @endif
                                        <div class="form-group p-2">
                                            <label for="markerImage" class="form-label">Marker Image</label>
                                            <input type="file" wired:model="markerImage">
                                            <div wire:loading wire:target="photo">Uploading...</div>
                                            <small>Max dimensions 100 px (W) x 100 px (H). Image must be of a .png file type</small>
                                            @if($errors->has('markerImage'))
                                                <div class="col p-3 my-2 bg-danger dw-rounded">
                                                    <strong>{{ $errors->first('markerImage') }}</strong>
                                                </div>
                                            @endif
                                    </div>
                                </div>

                                    <button type="button" class="btn dw-yellow dw-rounded text-dark" wire:click="addMapMarker">
                                        <strong>Create</strong>
                                    </button>

There are no errors in the laravel log. I'm a bit confused on why it's behaving like this.

Thanks!