Unable to Access Model Array in Livewire component

This is my page displaying a table populated with attendee information. I pass the attendee ID to a Livewire component, retrieve the corresponding data from the database, and render it in the Livewire view. However, clicking the "View" button always shows the details of the first attendee, even when I navigate to another page of the table. I've spent hours trying to resolve this, even attempting to pass the $attendee variable directly to the Livewire component within the loop, but the problem persists.

M y Livewire class

<?php

namespace App\Livewire;

use Livewire\Component;
use App\Models\AttendeesModel;


class AttendeeDetails extends Component
{
    public $id;
    public $attendee;

    public function mount($id)
    {
        $this->id = $id;
        $this->attendee = $this->fetchAttendeeDetails($id); // Fetch attendee details when component is mounted
    }

    public function fetchAttendeeDetails($id)
    {
        return AttendeesModel::findOrFail($id);
    }

    public function render()
    {
        return view('livewire.attendee-details');
    }
}

the component

<div>
    <button class="btn primaryButton" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight"
            aria-controls="offcanvasRight">
        View
    </button>


    <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
        <div class="offcanvas-header">
            <h5 class="offcanvas-title" id="offcanvasRightLabel">Basic Information</h5>
            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
            <div class="table-responsive">
                <table class="table">
                    <tbody>
                    <tr>
                        <td colspan="2">
                            <div class="text-center">
                                <img src="{{$attendee->photo}}" alt="Attendee Photo"
                                     style="width: 100px; height: 100px; object-fit: cover; border-radius: 50%;">
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <th>ID</th>
                        <td>{{$attendee->id}}</td>
                    </tr>
                    <tr>
                        <th>First Name</th>
                        <td>{{$attendee->first_name}}</td>
                    </tr>
                    <tr>
                        <th>Last Name</th>
                        <td>{{$attendee->last_name}}</td>
                    </tr>
                    <tr>
                        <th>Representing</th>
                        <td>{{$attendee->representing}}</td>
                    </tr>
                    <tr>
                        <th>Home Address</th>
                        <td>{{$attendee->address}}</td>
                    </tr>
                    <tr>
                        <th>Gender</th>
                        <td>{{Str::upper($attendee->gender)}}</td>
                    </tr>
                    <tr>
                        <th>Age</th>
                        <td>{{$attendee->age}}</td>
                    </tr>
                    <tr>
                        <th>Ethnicity</th>
                        <td>{{$attendee->ethnic}}</td>
                    </tr>
                    <tr>
                        <th>Educational Level</th>
                        <td>{{$attendee->education_level}}</td>
                    </tr>
                    <tr>
                        <th>Employment Status</th>
                        <td>{{$attendee->employment_status}}</td>
                    </tr>
                    <tr>
                        <th>Marital Status</th>
                        <td>{{$attendee->marital_status}}</td>
                    </tr>
                    <tr>
                        <th>Occupation</th>
                        <td>{{$attendee->occupation}}</td>
                    </tr>
                    <tr>
                        <th>Job Title</th>
                        <td>{{$attendee->job_title}}</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

my view single event page that holds the table

@if ($attendees->isEmpty())
                                            <h2 style="color: lightgrey" class="text-center">No attendees yet.</h2>
                                        @else
                                            <table id="datatable1" class="display" style="width: 100%">
                                                <thead class="header">
                                                <tr>
                                                    <th>Name</th>
                                                    <th>Email</th>
                                                    <th>Phone Number</th>
                                                    <th>Representing</th>
                                                    <th>Action</th>
                                                </tr>
                                                </thead>
                                                <tbody>
                                                @foreach ($attendees as $attendee)
                                                    <tr>
                                                        <td>{{ $attendee->first_name . " " . $attendee->last_name }}</td>
                                                        <td>{{ $attendee->email }}</td>
                                                        <td>{{ $attendee->phone }}</td>
                                                        <td>{{ $attendee->representing }}</td>
                                                        <td>
                                                            @livewire('attendee-details', ['id' => $attendee->id])
                                                        </td>


                                                @endforeach
                                                </tbody>
                                                <tfoot>
                                                </tfoot>
                                            </table>
                                        @endif

Please help me..