import React, { useState, useRef, useEffect } from "react";
import ReactDOM from "react-dom";

const PortalWrapper = React.forwardRef(({ children }, ref) => {
  const [openDropdownMenu, setOpenDropdownMenu] = useState(false);
  const [position, setPosition] = useState({
    left: 0,
    top: 0,
    width: "100%",
  });

  const dropdownRef = useRef(null);

  const handleDropdDownClick = () => {
    setOpenDropdownMenu(!openDropdownMenu);
    if (ref && "current" in ref && ref.current) {
      const { top, left, height } = ref.current.getBoundingClientRect();
      setPosition({
        top: top + height,
        left,
        width: `${ref.current.clientWidth}px`,
      });
    }
  };

  useEffect(() => {
    if (openDropdownMenu && dropdownRef.current) {
      dropdownRef.current.style.top = `${position.top}px`;
      dropdownRef.current.style.left = `${position.left}px`;
      dropdownRef.current.style.display = "none";
    }
  }, [openDropdownMenu, position]);

  return (
    <div ref={ref} className="w-full" onClick={handleDropdDownClick}>
      {children(position)}
      {openDropdownMenu &&
        ReactDOM.createPortal(
          <div ref={dropdownRef} style={{ position: "absolute" }}>
            {children(position)}
          </div>,
          document.body
        )}
    </div>
  );
});
export default PortalWrapper;

 <PortalWrapper ref={dropdownRef}>
                      {() =>
                        (itIsOwner(user?.agent_role) ||
                          user?.platform_owner) && (
                          <Select
                            styles={CustomStyle}
                            onChange={(selectedOption) =>
                              handleActionChange(
                                selectedOption,
                                contactInfo,
                                index
                              )
                            }
                            options={agentData?.map((option) => ({
                              value: option,
                              label: `${option.first_name} `,
                            }))}
                            placeholder="Esther Howard"
                            className={clsx(
                              "dropdown_list !w-40 cursor-pointer userFilter mt-[0.4375rem]"
                            )}
                            classNamePrefix="dropdown_list-contacts"
                            menuPosition="fixed"
                            menuPlacement="auto"
                            menuShouldScrollIntoView={false}
                            menuPortalTarget={document.body}
                          />
                        )
                      }
                    </PortalWrapper>