I'm attempting to have two functions run when a button is clicked. Each function works independent of each other, however handleSubmit() does nothing when I write onClick as an arrow function. When I click the button with both functions only editCart() runs. If i attempt this without using an arrow function I get a "too many re-render" error. I've also attempted to create a single wrapper function that calls both functions with no luck. As an aside do I pass the parameters for each function in the onClick arrow function?

  const { register, watch, handleSubmit, setValue } = useForm({
    defaultValues: {
      hoodieQuantity: 1,
    },
  });
  const onSubmit = (data) => {
    console.log(data);
  };

  const hoodieQuantity = watch("hoodieQuantity");
  const increaseQuantity = () =>
    setValue("hoodieQuantity", hoodieQuantity + 1);
  const decreaseQuantity = () => {
    if (hoodieQuantity > 1) {
      setValue("hoodieQuantity", hoodieQuantity - 1);
    }
  };

  const cartArray = [
    {
      name: "Hoodie",
      quantity: "0"
    },
    {
      name: "Sweats",
      quantity: "0"
    },
    {
      name: "Shirt",
      quantity: "0"
    },
    {
      name: "Mousepad",
      quantity: "0"
    },
  ]

  const [currentCart, setCurrentCart] = useState(cartArray);

  const editCart = () => {
    setCurrentCart(currentCart.map((cartItem, hoodieQuantity) =>
      cartItem.name === "Hoodie" ? { ...cartItem, quantity: {hoodieQuantity} } : { ...cartItem }

      )
    
    );
    console.log(cartArray);
  };

  <CounterContainer>
    <CounterWrapper>
      <CounterButtons onClick={decreaseQuantity}>
        -
      </CounterButtons>
    </CounterWrapper>
    <CounterWrapper>
      <CounterInput
        // quantity={quantity}
        {...register("hoodieQuantity")}
        placeholder="HoodieQuantity"
        id="hoodieQuantity"
        type="number"
      >
        {hoodieQuantity}
      </CounterInput>
    </CounterWrapper>
    <CounterWrapper>
      <CounterButtons onClick={increaseQuantity}>
        +
      </CounterButtons>
    </CounterWrapper>
  </CounterContainer>

<Btn onClick={() => [handleSubmit(onSubmit), editCart("Hoodie", hoodieQuantity)] }>Add to Cart</Btn>