How to forward custom ref

Forwarded.tsx

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

interface ForwardedHandlers<T> {
  getValue(): T;
}

interface ForwardedProps<T> {
  value: T;
  children?: never;
}

const ForwardedFn = <T extends string>(
  props: ForwardedProps<T>,
  ref: ForwardedRef<ForwardedHandlers<T>>
) => {
  const inputRef = useRef<HTMLInputElement>();

  useImperativeHandle(ref, () => ({
    getValue: () => inputRef.current?.value as T,
  }));

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

export const Forwarded = forwardRef(ForwardedFn) as <T extends any>(
  props: ForwardedProps<T> & { ref?: ForwardedRef<ForwardedHandlers<T>> }
) => ReturnType<typeof ForwardedFn>;


const ref = createRef<ForwardedHandlers<string>>();
const cmp = <Forwarded<string> value="Lorem ipsum"/>;
const value = ref.current.getValue();