ember js - service usage to show data

I am new to ember js and trying to write my first app...

I have :

service app/service/event_handler.js

import Service from '@ember/service';

export default class EventHandlerService extends Service {

    eventList = [
        {
            EventName: 'test event 1',
            EventDesc: 'test event 1 desc',
            StartDate: '16.11.2023',
            EndDate: '05.02.2024',
            EventType_ID: 1,
        },
        {
            EventName: 'test event 2',
            EventDesc: 'test event 2 desc',
            StartDate: '17.11.2023',
            EndDate: '15.02.2024',
            EventType_ID: 2,
        },
        {
            EventName: 'test event 3',
            EventDesc: 'test event 3 desc',
            StartDate: '13.10.2023',
            EndDate: '01.01.2024',
            EventType_ID: 1,
        }
    ];
}

controller app/controllers/event-controller.js

import Controller from '@ember/controller';
import { getOwner } from '@ember/application';
import { service } from '@ember/service';
export default class EventControllerController extends Controller {
    // @service eventHandler;

    get events() {
        console.log("loading events");
        return getOwner(this).lookup('service:event-handler')
    }
}

and my hbs file that has a code block

<table>
                <thead>
                    <tr>
                        <th>Event name</th>
                        <th>Event Date Start</th>
                        <th>Event Date End</th>
                    </tr>
                </thead>
                <tbody>

                    
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    
                </tbody>
            </table>

the table is empty and i dont know what am i doing wrong :c I tried looking some tutorials and asking ai but I am still having issues...