Callout with reference target is not rendering beak

[micahgodbolt]

Using an ID reference works fine, but reference targets don't render a beak and always render at the top of the referenced element.

https://codepen.io/micahgodbolt/pen/VwYaKYb?editors=0010

[joschect]

@micahgodbolt I think this is happening in this case because the element is a react element rather than a dom element. If you look at what goes into the ref it's not a div.

[micahgodbolt]

@joschect same issue with ref placed on the div above.

[joschect]

@micahgodbolt Correct, because at the time that the component first render, ref.current won't contain the actual element because it hasn't mounted yet. Instead just pass the ref itself into the picker as it will handle checking to see if it has an actual element. Check it out in this codepen

[micahgodbolt]

OH sheesh. I didn't even notice the .current on that ref. I gotcha now.