Получение пользовательских компонентов для работы в форме реакции-хука с помощью onChange

У меня есть корзина для оформления заказа, в которой у вас есть разные элементы корзины, и для каждого из них вы можете изменить количество перед покупкой.

Вот как выглядит код:

import React, { useEffect, useState } from "react";

import PureInput from "./PureInput";
import { useForm, Controller } from "react-hook-form";

const CartInner = React.forwardRef(
  (
    {
      control,
      element,
      value,
      handleOnChange,
      images,
      name,
      monthlyAmount,
      price,
      projectedGrowth,
      id,
      ...inputProps
    }: any,
    ref: any
  ) => {
    return (
      <div className = "grid gap-8 grid-cols-2 mb-12 py-6 px-8 border-2 border-slate-200">
        <div>
          <PureInput
            min = {200}
            max = {price}
            onChange = {handleOnChange}
            type = "number"
            step = {200}
            defaultValue = {element.price}
            id = {id}
            ref = {ref}
            {...inputProps}
          />
        </div>
      </div>
    );
  }
);

export default function Checkout() {
  const { control, handleSubmit } = useForm();

  const handleOnChange = (index: any, e: any) => {
    console.info(e, "e");
  };

  const onSubmit = async (data: any) => {
    console.info(data, "data from Form.tsx");
  };

  return (
    <form onSubmit = {handleSubmit(onSubmit)} className = "grid gap-8 grid-cols-3">
      <div className = "col-span-2">
        {[0, 2].map((element, index) => {
          return (
            <fieldset key = {index}>
              <Controller
                render = {({ field }) => (
                  <CartInner
                    element = {element}
                    handleOnChange = {(e) => handleOnChange(index, e)}
                    {...field}
                  />
                )}
                name = {`test.${index}.lastName`}
                control = {control}
              />
            </fieldset>
          );
        })}
        <button>Progess to payment</button>
      </div>
    </form>
  );
}

И чистый ввод:

import * as React from "react";

type IProps = any;

const PureInput = React.forwardRef(
  ({ className, id, onChange, ...inputProps }: IProps, ref: any) => {
    return (
      <input
        id = {id}
        ref = {ref}
        onChange = {onChange}
        type = "input"
        className = {`${className} block w-full bg-white text-black rounded-md border-2 font-bold border-grey-200 text-xl px-4 py-4 focus:border-orange-500 focus:ring-orange-500`}
        {...inputProps}
      />
    );
  }
);

export default PureInput;

Все работает нормально с точки зрения отправки формы. Когда я это делаю, я получаю массив любых значений, которые я ввел на вход:

[{lastName: "1600"}
{lastName: "800"}]

Мои версии пакетов:

"react-dom": "18.2.0",
"react-hook-form": "^7.29.0",

Но мой onChange больше не срабатывает. Как я могу заставить onChange срабатывать, чтобы я мог регистрировать значение ввода внутри компонента <Checkout />?

Вот codeandbox если поможет