Unable to dp.init() in Lightning Web Component

Using the javascript scheduler capability the following error message is returned when attempting to init() the scheduler instance.

DayPilot.Scheduler: The placeholder element not found: 'dp'.

How is the element placeholder passed to the div class?

HTML:

    <template>
        <div class="dp" lwc:dom="manual" style='width: 100%;' id="dp"></div>
    </template>

JS

        const dp = new window.DayPilot.Scheduler("dp", {
            timeHeaders: [{"groupBy":"Year"},{"groupBy":"Month"},{"groupBy":"Day","format":"d"}],
            scale: "Day",
            days: "365",
            startDate: "2023-01-01",
            showNonBusiness: false,
            eventMovingStartEndEnabled: true,
            timeRangeSelectedHandling: "Enabled",
            onTimeRangeSelected: async (args) => {
              const dp = args.control;
              const modal = await DayPilot.Modal.prompt("Create a new event:", "Event 1");
              dp.clearSelection();
              if (modal.canceled) { return; }
              dp.events.add({
                start: args.start,
                end: args.end,
                id: DayPilot.guid(),
                resource: args.resource,
                text: modal.result
              });
            treeEnabled: true,
          });

        dp.resources = [
        {
    ];
    dp.events.list = [  {
    }];
        dp.init();