Can't get component ref. Is this a bug?

[jt-helsinki]

I have. component like this:

export const EBUSelect2 = React.forwardRef((
    props: StateManagerProps<Option, IsMulti, Group> &
      RefAttributes<Select> & { id?: string; 'data-testid'?: string; labelText?: string; required?: boolean },
    forwardRef: ForwardedRef<any>
  ): React.ReactElement => {
    const ref = React.useRef();
    React.useImperativeHandle(forwardRef, () => ref.current);
    const newProps = { ...props, ...(ref ? { ref } : {}) };

    useEffect(() => {
      console.log(ref.current)
    }, [ref.current]);

    return props.labelText ? (
      <Select {...(newProps as any)} required />
    );
  }
);

Why is the ref always null? It's like the ref is not being attached to the underlying Select component. This seems like a bug but I imagine I am doing something incorrectly.

any help would be much appreciated.

JT

[jt-helsinki]

OK, got this working by changing the waay I use the forward ref.

This:

export const EBUSelect2 = React.forwardRef((
    props: StateManagerProps<Option, IsMulti, Group> &
      RefAttributes<Select> & { id?: string; 'data-testid'?: string; labelText?: string; required?: boolean },
    forwardRef: ForwardedRef<any>
  ): React.ReactElement => {
    const ref = React.useRef(forwardRef);
    const newProps = { ...props, ...(ref ? { ref } : {}) };

    useEffect(() => {
      console.log(ref.current)
    }, [ref.current]);

    return props.labelText ? (
      <Select {...(newProps as any)} required />
    );
  }
);

becomes:

export const EBUSelect2 = React.forwardRef((
    props: StateManagerProps<Option, IsMulti, Group> &
      RefAttributes<Select> & { id?: string; 'data-testid'?: string; labelText?: string; required?: boolean },
    forwardRef: ForwardedRef<any>
  ): React.ReactElement => {
    const ref = React.useRef();
    React.useImperativeHandle(forwardRef, () => ref.current);
    const newProps = { ...props, ...(ref ? { ref } : {}) };

    useEffect(() => {
      console.log(ref.current)
    }, [ref.current]);

    return props.labelText ? (
      <Select {...(newProps as any)} required />
    );
  }
);

This works with the help of React.useImperativeHandle()

Hope this helps someone.