Functions in propos in mitosis component not transpiled to propfunction in qwik output

[waozixyz]

I am interested in helping provide a fix!

Yes

Which generators are impacted?

• All
• Angular
• HTML
• Preact
• Qwik
• React
• React-Native
• Solid
• Stencil
• Svelte
• Vue
• Web components

Reproduction case

cannot use tsx?

Expected Behaviour

when i have an interafce witha function such as onChange it needs to transpile to a propfunction in qwik otherwise i get an error and it does not work.

If i am just one component it does not seem to give an error, but if i am relying to multiple mitosis components that are using the onChange prop it stops working and i need to manually update the qwik transpiled code to make it work again

Actual Behaviour

see the message above

Additional Information

Either I am not using mitosis correctly or this is indeed a bug
here the example interafces iamusing

export interface CalendarProps {
  value?: Date;
  onChange?: (event: { target: { value: Date } }) => void;
  minDate?: Date;
  maxDate?: Date;
  backgroundColor?: string;
  textColor?: string;
  accentColor?: string;
  fontSize?: string;
  locale?: string;
}


export interface DateTimePickerProps {
  value?: Date;
  onChange?: (event: { target: { value: Date } }) => void;
  format?: '12h' | '24h';
  size?: 'small' | 'medium' | 'large';
  backgroundColor?: string;
  textColor?: string;
  accentColor?: string;
  showBorder?: boolean;
  minDate?: Date;
  maxDate?: Date;
}

the date timepicker usesthe calendar as well so the onChange method gets called in the date time picker

      {state.isCalendarOpen && (
        <Calendar
          value={state.selectedDateTime}
          onChange={(event) => state.setDate(event)}
          minDate={props.minDate}
          maxDate={props.maxDate}
          accentColor={state.accentColor}
          fontSize={state.fontSize}
          backgroundColor={state.backgroundColor}
          textColor={state.textColor}
        />
      )}

In the qwik output i manually need to update the onChange to be a Propfunction such as this

 import {
  $,
  Fragment,
  PropFunction,
  component$,
  h,
  useStore,
  useStylesScoped$,
  useTask$,
  useVisibleTask$,
} from "@builder.io/qwik";

import { DateTime, Info } from "luxon";

export interface CalendarProps {
  value?: Date;
  onChange$?: PropFunction<(event: { target: { value: Date } }) => void>;
  minDate?: Date;
  maxDate?: Date;
  backgroundColor?: string;
  textColor?: string;
  accentColor?: string;
  fontSize?: string;
  locale?: string;
}

by default this gets generated

import {
  $,
  Fragment,
  component$,
  h,
  useStore,
  useStylesScoped$,
  useTask$,
  useVisibleTask$,
} from "@builder.io/qwik";

import { DateTime, Info } from "luxon";

export interface CalendarProps {
  value?: Date;
  onChange?: (event: {
    target: {
      value: Date;
    };
  }) => void;
  minDate?: Date;
  maxDate?: Date;
  backgroundColor?: string;
  textColor?: string;
  accentColor?: string;
  fontSize?: string;
  locale?: string;
}

which gives an erorr