I’m use modal as a const and i have not put any div, h2 and other kind of html tags that’s where make this error. the modal pop up is displayed correctly and i dont have any divs in my render return but i still get the error : index.js:1446 Warning: validateDOMNesting(…): cannot appear as a child of .

I tried many solutions found online but none of them worked.

function Actions({ pentest, refetch }: { pentest: Pentest; refetch: Function }) {
  const { t: tPentests } = useTranslation("prospects-translations");
  const { modal } = useModal();
  const { proposals } = pentest;
  const activeProposal = useMemo(
    () => _.find(proposals, { status: "Submitted" }),
    [proposals]
  );
  const { t } = useTranslation("prospects-translations");

  const handleOpen = async () => {
    const success = await modal({
      title: t(
        "actions.submitProposalTitle",
        `${pentest.category} ${pentest.type}`
      ),
      content: <SubmitProposal pentest={pentest} />,
    });
    if (success && refetch) refetch();
  };

  return (
    <>
      {!activeProposal ? (
        <Button variant="text" onClick={handleOpen}>
          {tPentests("actions.submitProposal")}
        </Button>
      ) : (
        <Button
          variant="outlined"
          onClick={() => openFileInNewTab(pentest.proposals)}
        >
          {tPentests("actions.viewProposal")}
        </Button>
      )}
    </>
  );
}