useMergeRef

import {useMergeRefs} from "@shoplflow/utils"
 
const Container = () => {
  const ref1 = React.useRef<HTMLDivElement>(null);
  const ref2 = React.useRef<HTMLDivElement>(null);
  const ref3 = React.useRef<HTMLDivElement>(null);
  const ref = useMergeRefs(ref1, ref2, ref3);
 
  return(
  <div ref={ref}>container</div>
  )
}

export const PopperTrigger = forwardRef<HTMLDivElement, PopperTriggerProps>(
 ({ children, isOpen = false, ...rest }, ref) => {
   const { setReference, setIsOpen } = usePopper();
 
   const refs = useMergeRefs(ref, setReference);
 
   useEffect(() => {
     setIsOpen(isOpen);
   }, [isOpen, setIsOpen]);
 
   return (
     <StyledPopper ref={refs} data-shoplflow={'Popper'} {...rest}>
       {children}
     </StyledPopper>
   );
 },
);