Laravel 8, can't show the image but image got uploaded into database and local folder yet isn't shown?

Question

i am using laravel 8 framework but can't seem to update my profile image. It always goes to fallback image when i am trying to update the image. enter image description here And here is my code

profile.blade.php

<div class="card-body">
    <form action="{{ route('profile.update') }}" method="POST" enctype="multipart/form-data">
        @csrf
        @method('patch')

        <div class="form-group">
            <label for="image">Profile Image <span class="text-danger">*</span></label>
            <img style="width: 100px;height: 100px;" class="d-block mx-auto img-thumbnail img-fluid rounded-circle mb-2" src="{{ auth()->user()->getFirstMediaUrl('avatars') }}" alt="Profile Image">
            <input id="image" type="file" name="image" data-max-file-size="500KB">
        </div>

ProfileController.php :

   public function update(Request $request) {
        if ($request->has('image')) {
            if ($request->has('image')) {
                $tempFile = Upload::where('folder', $request->image)->first();

                if (auth()->user()->getFirstMedia('avatars')) {
                    auth()->user()->getFirstMedia('avatars')->delete();
                }

                if ($tempFile) {
                    auth()->user()->addMedia(Storage::path('temp/' . $request->image . '/' . $tempFile->filename))->toMediaCollection('avatars');

                    Storage::deleteDirectory('temp/' . $request->image);
                    $tempFile->delete();
                }
            }
        }

        toast('Profile Updated!', 'success');

        return back();
    }

web.php

//User Profile
    Route::patch('/user/profile', 'ProfileController@update')->name('profile.update');

User.php

public function registerMediaCollections(): void
    {
        $this->addMediaCollection('avatars')
            ->useFallbackUrl('https://www.gravatar.com/avatar/');
    }

Strangely enough i have image in product tabs and it's working fine perfectly, it just error in profile yet it didn't show any error and i am so clueless about this.

I want to make that the image i uploaded is shown in mediacollection named 'avatars'. Yet it always use the fallback image, what to do and how to debug that? i am a beginner sorry.