How to fix useImperativeHandle second argument must be a function that returns the handle in React

// WRONG - passing object directly
useImperativeHandle(ref, {
  focus() {
    inputRef.current.focus();
  }
});

// CORRECT - function that returns object
useImperativeHandle(ref, () => ({
  focus() {
    inputRef.current.focus();
  }
}));

// WRONG - no return statement
useImperativeHandle(ref, () => {
  // Missing return!
  {
    focus() { inputRef.current.focus(); }
  }
});

// CORRECT - explicit return
useImperativeHandle(ref, () => {
  return {
    focus() { inputRef.current.focus(); }
  };
});

// ALSO CORRECT - implicit return with parentheses
useImperativeHandle(ref, () => ({
  focus() { inputRef.current.focus(); }
}));

// With dependencies
useImperativeHandle(ref, () => ({
  scrollTo(value) {
    scrollRef.current.scrollTop = value;
  }
}), [scrollRef]); // Include scrollRef if it changes

// Without dependencies (empty array)
useImperativeHandle(ref, () => ({
  focus() {
    inputRef.current.focus();
  }
}), []); // Empty array means function never recreates

import { useRef, useImperativeHandle, forwardRef } from 'react';

const MyInput = forwardRef(function MyInput(props, ref) {
  const inputRef = useRef(null);
  
  useImperativeHandle(ref, () => ({
    focus() {
      inputRef.current.focus();
      console.log('focus called');
    },
    clear() {
      inputRef.current.value = '';
    }
  }), []);
  
  return <input ref={inputRef} />;
});

// Usage in parent component
function Parent() {
  const inputRef = useRef(null);
  
  const handleClick = () => {
    inputRef.current?.focus();
  };
  
  return (
    <div>
      <MyInput ref={inputRef} />
      <button onClick={handleClick}>Focus input</button>
    </div>
  );
}

// React 18 and earlier
import { forwardRef, useImperativeHandle } from 'react';

const MyComponent = forwardRef((props, ref) => {
  useImperativeHandle(ref, () => ({
    // handle methods
  }));
  
  return <div>...</div>;
});

// React 19+
function MyComponent({ ref }) {
  useImperativeHandle(ref, () => ({
    // handle methods
  }));
  
  return <div>...</div>;
}