Stack does not properly forward ref

[iansan5653]

Stack appears to accept a ref prop based on the TypeScript types, but this ref is not actually bound to the underlying element:

export function Example() {
  const ref = useRef<HTMLDivElement>(null)

  useEffect(() => console.log(ref.current))

  return <Stack {...props} ref={ref}>contents</Stack>
}

If Stack correctly forwarded its ref, the console would log an HTMLDivElement instance. However, it instead always logs null.

[Jaykhanderay]

import React, { forwardRef } from "react";

const Stack = forwardRef((props, ref) => {
return (
<div {...props} ref={ref}>
{props.children}

);
});

export default Stack;

[Rakesh31-syc]

In React, when a ref is passed to a component, that component must forward the ref to a DOM element using React.forwardRef. If the Stack component does not implement forwardRef, the ref will not be attached to the underlying DOM element, resulting in ref.current being null or undefined.

import React, { useRef, useEffect } from 'react';

export function Example(props) {
const ref = useRef(null);

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

return <Stack {...props} ref={ref}>contents;
}

[lesliecdubs]

Primer First Responder, we'd love your help fixing this ref!