TypeError: props.render is not a function in React.js, Commerce.js, Stripe application project

Question

I am getting the following error but not sure why, and it points to this line.

useEffect(() => {
    if (cart.id) {
      const generateToken = async () => {

25 | try {
  26 |   const token = await commerce.checkout.generateToken(cart.id, { type: 'cart' });
  27 | 
> 28 |   setCheckoutToken(token);
     | ^  29 | } catch {
  30 |   if (activeStep !== steps.length) history.push('/');
  31 | }
  };

      generateToken();
    }
  }, [cart]);

also it shows:

 1 | import { ControllerProps, FieldPath, FieldValues } from './types';
  2 | import { useController } from './useController';
  3 | 
> 4 | const Controller = <
  5 |   TFieldValues extends FieldValues = FieldValues,
  6 |   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
  7 | >(

Answer 1

I had the same problem. I had to reinstall the earlier version of react-hook-form. Type into the terminal: npm install react-hook-form@6.2.0