I have a react form , i have used a few syncfusion components, now I would want the entire form to be a modal, i am using react-dialog component, that seems to misbehave, the buttons don't work, the api calls don't work, am not sure what to do?

import { DialogComponent } from "@syncfusion/ej2-react-popups";
import Login from "./Login";

const LoginFormModal = () => {
  return (
    <div className="control-pane">
      <div
        id="targetElement"
        className="control-section col-lg-12 defaultDialogComponent dialog-target"
      >
        <DialogComponent
          id="defaultDialog"
          showCloseIcon={true}
          visible={true}
          width={"700px"}
          target={"targetElement"}
          isModal={true}
        >
          <Login />
        </DialogComponent>
      </div>
    </div>
  );
};
export default LoginFormModal;

The Login component is the Login form, how to do it?

I had tried few things, including including the etnrie thing in react dialog box component, that resulted in nothing. I need some help