How to call onChange in <Select.Item>

[IlirEdis]

I want to navigate to another page when selecting another item from the Select primitive.
How do i call onChange function in a <Select> primitive?

Something like this:

const SelectItem = forwardRef(
  ({ children, className, ...props }: any, forwardedRef) => {
    const router = useRouter();

    return (
      <Select.Item
        onChange={() => router.push("/sample-page")}
        className={classnames(
          "text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] pr-[35px] pl-[25px] relative select-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:outline-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1",
          className
        )}
        {...props}
        ref={forwardedRef}
      >
        <Select.ItemText>{children}</Select.ItemText>
        <Select.ItemIndicator className='absolute left-0 w-[25px] inline-flex items-center justify-center'>
          <CheckIcon />
        </Select.ItemIndicator>
      </Select.Item>
    );
  }
);

I also tried wrapping it in a Link component but its not working.

[tushar1998]

SelectPrimitive.Root has onValueChange prop you will get change value from here