Modal is Not Opening in Correct Position

Question

i have a Nextjs code Modal is opening with div tag not separate tag

i call the button in server and try to open it

Server Calling code

<div className="col-lg-6 col-xl-5 col-md-8  mb-5">
   <Suspense fallback="Loading">
   <EduButton
      text={"Get Started Today"}
      countryCode={countryCode}
      classes={`${Styles["edu-btn"]} ${Styles["btn-small"]}`}
   />
   </Suspense>
</div>

client Code

const [active, setActive] = useState(false);
  const router = useRouter();
  return (
    <>
      <button
        className={`edu-btn ${classes}`}
        onClick={
          clickFunction
            ? () => router.push(clickFunction)
            : clickFunctionAction
            ? clickFunctionAction
            : () => setActive(true)
        }
        type={type}
      >
        {text}
      </button>
      {active && (
        <EnqueryNow
          active={active}
          setActive={setActive}
          countryCode={countryCode}
        />
      )}
    </>
  );

enter image description here