How to fix Warning: Stateless function components cannot be given refs. Attempts to access this ref will fail. in React

import React, { forwardRef } from 'react';

// Before - causes warning
const MyInput = (props) => {
  return <input {...props} />;
};

// After - properly forwards ref
const MyInput = forwardRef((props, ref) => {
  return <input ref={ref} {...props} />;
});

// Usage in parent component
function ParentComponent() {
  const inputRef = useRef(null);

  const focusInput = () => {
    inputRef.current?.focus();
  };

  return (
    <>
      <MyInput ref={inputRef} />
      <button onClick={focusInput}>Focus Input</button>
    </>
  );
}

// Child component accepts inputRef prop instead of ref
function MyInput({ inputRef, ...props }) {
  return <input ref={inputRef} {...props} />;
}

// Parent component passes inputRef
function ParentComponent() {
  const inputRef = useRef(null);

  return <MyInput inputRef={inputRef} placeholder="Enter text" />;
}

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

const CustomInput = forwardRef((props, ref) => {
  const inputRef = useRef(null);

  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current?.focus();
    },
    clear: () => {
      if (inputRef.current) {
        inputRef.current.value = '';
      }
    },
    getValue: () => {
      return inputRef.current?.value || '';
    }
  }));

  return <input ref={inputRef} {...props} />;
});

// Usage
function ParentComponent() {
  const customInputRef = useRef(null);

  const handleAction = () => {
    customInputRef.current?.focus();
    console.log(customInputRef.current?.getValue());
    customInputRef.current?.clear();
  };

  return (
    <>
      <CustomInput ref={customInputRef} />
      <button onClick={handleAction}>Interact</button>
    </>
  );
}

import ThirdPartyComponent from 'some-library';

function ParentComponent() {
  const containerRef = useRef(null);

  return (
    <div ref={containerRef}>
      <ThirdPartyComponent />
    </div>
  );
}