Svelte 5 custom dispatch Object literal may only specify known properties

I am trying to create a simple dispatcher but I keep getting error that it doesnt recognize the dispatcher that i am creating.

function dispatchChange() {    dispatch('treeChange', {        id: field.checkbox.id,        selected: field.checkbox.selected,        disabled: field.checkbox.disabled,        visible: field.checkbox.visible    });}

<Checkbox     checked={item.field.checkbox.selected}    onCheckedChange={() => dispatchChange()}    aria-labelledby="terms-label"/>

And here is how i am trying to use it

function handleCheckboxChange(event: CustomEvent) {    const { id, selected, disabled, visible } = event.detail;    console.log(`Checkbox ${id} in tree changed:`, { selected, disabled, visible });    // Update your tree state here}

<div on:treeChange={handleCheckboxChange}>

I keep getting:

Object literal may only specify known properties, and "on:treeChange" does not exist in type HTMLProps<"div", HTMLAttributes<any>>

And this:

Using on:treeChange to listen to the treeChange event is deprecated. Use the event attribute ontreeChange

I did try ontreeChange but doenst do anything, it still gets an error that its not recognized.