PNG uploads, MP3 doesn't: 422 Unprocessable Content

FileUploadController.php

class FileUploadController extends Controller
{
    public function uploadprayer(Request $request)
    {
        // Validate the request
        $request->validate([
            'file' => 'required|mimes:jpg,jpeg,png,mp3,mp4',
        ]);

        // Retrieve the uploaded file
        $file = $request->file('file');

        // Generate a unique file name
        $fileName = Str::uuid() . '.' . $file->getClientOriginalExtension();

        // Store the file in the 'public/uploads' directory
        $path = $file->storeAs('public/uploads', $fileName);

        // Return a response with the file path
        return response()->json(['path' => Storage::url($path)], 201);
    }
}

FileUpload.vue

 const handleSubmit = () => {
    if (file.value) {

      // Create FormData object to send file data
      const formData = new FormData();
      formData.append('file', file.value);
  
      // Send file to the server 
      axios.post('/uploadprayer', formData, { 
        headers: {
            'Content-Type': 'multipart/form-data',
        }})
        .then(data => {
          console.log('Success:', data);
          alert('File uploaded successfully!');
        })
        .catch(error => {
          console.error('Error:', error.response);
          alert('Failed to upload file.');
        });
    } else {
      alert('Please select a file to upload.');
    }
  };

If I delete validation rules it uploads everything succesfully.