Lỗi property id does not exist on this collection instance năm 2024

Estoy en laravel 7 y usando el paquete de roles y usuarios de Spatie, llamado permissions. Necesito hacer un crud que me permita realizar la mantención de la relación de usuarios y su rol respectivo. Este crud debe permitir:

1. Listar los usuarios y su rol asignado (cada usuario puede tener un solo rol). 2. Crear una asociación de un rol a un usuario.
2. Modificar una relación de usuario y rol existente.
3. Eliminar una relación de usuario y un rol.

Para el caso de (1) Listar los usuarios y sus roles, estoy enviando lo siguiente a la vista:

<?php
namespace App\Http\Livewire;
use App\Models\User;
use Illuminate\Contracts\Pagination\Paginator;
use Livewire\Component;
use Livewire\WithPagination;
class AdminUsurol extends Component
{
    use WithPagination;
    protected $paginationTheme="bootstrap";
    public $search;
    public function render()
    {       
        $userroles = User::with('roles')->get();
        return view('livewire.admin-usurol', compact('userroles'));
    }
    public function limpia_page(){
        $this->reset('page');
    }
}

En la vista tengo lo siguiente:

@if ($userroles->count())
    <div class="card-body">
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>Usuario</th>
                    <th>Rol</th>
                    <th colspan="2"></th>
                </tr>
            </thead>
            <tbody>
                @forelse ($userroles as $userrole)
                    <tr>
                        <td>{{$userrole->name}}</td>
                        <td>{{$userrole->roles->name}}</td>
                        <td width="10px">
                            <a class="btn btn-info" href="{{route('usurol.edit', $userrole)}}">Modificar</a>
                        </td>
                        <td width="10px">
                            <form action="{{route('usurol.destroy',$userrole)}}" method="POST">
                                @method('delete')
                                @csrf
                                <button class="btn btn-danger" type="submit">Eliminar</button>
                            </form>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="5">No hay usuarios asociados a roles registrados</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
    <div class="card-footer">
    </div>            
@else
    <div class="card-body">
        <p>No hay coincidencias</p>
    </div>
@endif

Pero al ejecutar me arroja:

Si imprimo lo que se manda a la vista, tengo:

Illuminate\Database\Eloquent\Collection {
# 1481 ▼
  
# items: array:3 [▼
    0 => App\Models\User {
# 1468 ▶}
    1 => App\Models\User {
# 1469 ▶}
    2 => App\Models\User {
# 1470 ▶}
  ]
}

Abriendo el primer elemento:

    Illuminate\Database\Eloquent\Collection {
# 1481 ▼
  
# items: array:3 [▼
    0 => App\Models\User {
# 1468 ▼
      
# fillable: array:4 [▶]
      
# hidden: array:2 [▶]
      
# casts: array:1 [▶]
      
# connection: "mysql"
      
# table: "users"
      
# primaryKey: "id"
      
# keyType: "int"
      +incrementing: true
      
# with: []
      
# withCount: []
      
# perPage: 15
      +exists: true
      +wasRecentlyCreated: false
      
# attributes: array:9 [▼
        "id" => 1
        "name" => "User1"
        "email" => "[email protected]"
        "email_verified_at" => null
        "password" => "$2y$10$Uuf3Ml7cVgx54N.P06oGeul.ytDkArX2M9n2rEJVOg/yQz1qTHYvG"
        "flg_vigencia" => 1
        "remember_token" => null
        "created_at" => "2021-02-02 15:50:37"
        "updated_at" => "2021-02-02 15:50:37"
      ]
      
# original: array:9 [▶]
      
# changes: []
      
# classCastCache: []
      
# dates: []
      
# dateFormat: null
      
# appends: []
      
# dispatchesEvents: []
      
# observables: []
      
# relations: array:1 [▼
        "roles" => Illuminate\Database\Eloquent\Collection {
# 1485 ▼
          
# items: array:1 [▼
            0 => Spatie\Permission\Models\Role {
# 1477 ▼
              
# guarded: array:1 [▶]
              
# connection: "mysql"
              
# table: "roles"
              
# primaryKey: "id"
              
# keyType: "int"
              +incrementing: true
              
# with: []
              
# withCount: []
              
# perPage: 15
              +exists: true
              +wasRecentlyCreated: false
              
# attributes: array:6 [▼
                "id" => 1
                "name" => "Admin"
                "flg_vigencia" => 1
                "guard_name" => "web"
                "created_at" => "2021-02-02 15:50:37"
                "updated_at" => "2021-02-02 15:50:37"
              ]
              
# original: array:9 [▶]
              
# changes: []
              
# casts: []
              
# classCastCache: []
              
# dates: []
              
# dateFormat: null
              
# appends: []
              
# dispatchesEvents: []
              
# observables: []
              
# relations: array:1 [▶]
              
# touches: []
              +timestamps: true
              
# hidden: []
              
# visible: []
              
# fillable: []
              -permissionClass: null
            }
          ]
        }
      ]
      
# touches: []
      +timestamps: true
      
# visible: []
      
# guarded: array:1 [▶]
      
# rememberTokenName: "remember_token"
      -roleClass: null
      -permissionClass: null
    }
    1 => App\Models\User {
# 1469 ▶}
    2 => App\Models\User {
# 1470 ▶}
  ]
}

Mi consulta es de qué forma debo acceder a la información del rol en la vista de modo que se pueda desplegar?