Assets path 404 on production server

I have the following method on my /user model

    public function getAvatar()
    {
        if (is_null($this->avatar)) {
            return "/images/user.jpg";
        }

        $avatar = $this->avatar;

        return asset('avatars/'.$avatar);
    }

I am using Laravel Valet for local development and Amazon Linux 2 AMI using Apache the production server

The above method returns the following path respectively for a user

VALET => http://codenathan.test/avatars/1_avatar1612181090.png
SERVER => http://codenathan.dev/avatars/1_avatar1612181090.png

On the server the URL returns 404 whereas on local dev (VALET) its working fine

However, if I manually hit the following URL both links work well. However this is not what is returned by the getAvatar method :

VALET => http://codenathan.test/storage/avatars/1_avatar1612181090.png 
SERVER => http://codenathan.dev/storage/avatars/1_avatar1612181090.png 

Here are my settings

Server settings for apache

<VirtualHost *:80>
       ServerName codenathan.dev
       DocumentRoot /var/www/html/codenathan/public
       <Directory /var/www/html/codenathan>
            Options Indexes FollowSymLinks MultiViews
            AllowOverride All
            Order allow,deny
            allow from all
            Require all granted
       </Directory>
</VirtualHost>

config/filesystems.php:

        'public' => [
            'driver' => 'local',
            'root' => storage_path('app/public'),
            'url' => env('APP_URL').'/storage',
            'visibility' => 'public',
        ],

This application is using the latest laravel 8 and everything else as standard I created the symbolic link using

php artisan storage:link