dropdown open in portal for using table in react

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>