First time clicking anywhere in a Formik form closes the modal

[ChristianWBrand]

So the issue I'm having is I have a button that opens a modal with a form using Formik in it. The first time the modal is opened after refreshing the page, clicking anywhere on the form will automatically close the modal. Subsequent modal openings do not have that behavior.

My dependencies:

"dependencies": {
    "@headlessui/react": "^1.7.17",
    "formik": "^2.4.4",
    "next": "^13.4.19",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "tailwindcss": "3.3.3",
    "typescript": "5.2.2"
  }

File with the button and the modal:

import Link from "next/link";
import { useState } from "react";
import Image from "next/legacy/image";
import { PhoneIcon } from "@heroicons/react/24/solid";

import { Title } from "@/components/client/common/title";
import LpModal from "@/components/client/common/modal/lp";
import { phone } from "@/components/client/common/navbar/data";

export default function S1({ data }: any) {
  const [open, setOpen] = useState(false);

  return (
    <div className="py-10 md:pb-20">
      <div className="max-w-5xl mx-auto px-5 md:px-10 xl:px-0">
        <Title title={data.titles[0]} />
      </div>

      <div className="max-w-7xl mx-auto px-5 md:px-10 2xl:px-0 grid grid-cols-2 md:grid-cols-3 gap-2 md:gap-5">
        {data.images.slice(0, 3).map((item: any, index: number) => (
          <div
            key={index}
            className={`${
              index + 1 === data.images.slice(0, 3).length
                ? "col-span-full md:col-span-1"
                : null
            }`}
          >
            <Image
              width={338}
              height={231}
              src={item.img}
              alt={item.imgAlt}
              layout="responsive"
              className="w-full"
            />
          </div>
        ))}
      </div>

      <div className="max-w-5xl mx-auto px-5 md:px-10 xl:px-0 py-10">
        <div
          dangerouslySetInnerHTML={{
            __html: data.bodies[0],
          }}
        />
      </div>

      <div className="max-w-7xl mx-auto px-5 md:px-10 2xl:px-0 grid grid-cols-2 md:grid-cols-3 gap-2 md:gap-5">
        {data.images.slice(3, 9).map((item: any, index: number) => (
          <div key={index}>
            <Image
              width={338}
              height={231}
              src={item.img}
              alt={item.imgAlt}
              layout="responsive"
              className="w-full"
            />
          </div>
        ))}
      </div>

      <div className="max-w-5xl mx-auto px-5 md:px-10 xl:px-0 py-10">
        <div
          dangerouslySetInnerHTML={{
            __html: data.bodies[1],
          }}
        />
      </div>

      <div className="max-w-7xl mx-auto px-5 md:px-10 2xl:px-0 grid grid-cols-2 md:grid-cols-3 gap-2 md:gap-5">
        {data.images.slice(9).map((item: any, index: number) => (
          <div key={index}>
            <Image
              width={338}
              height={231}
              src={item.img}
              alt={item.imgAlt}
              layout="responsive"
              className="w-full"
            />
          </div>
        ))}
      </div>

      <div className="max-w-5xl mx-auto px-5 md:px-10 xl:px-0 pt-10">
        <div
          dangerouslySetInnerHTML={{
            __html: data.bodies[2],
          }}
        />

        <div className="pt-6 grid md:grid-cols-2 font-bold">
          <div
            className="editor"
            dangerouslySetInnerHTML={{
              __html: data.bodies[3],
            }}
          />

          <div
            className="editor"
            dangerouslySetInnerHTML={{
              __html: data.bodies[4],
            }}
          />
        </div>

        <div className="pt-10 flex flex-col md:flex-row justify-center items-center gap-x-10 gap-y-5 font-custom text-xl md:text-2xl">
          <Link
            href={`tel:${phone}`}
            className="bg-orange-600 hover:bg-white border border-orange-600 text-white hover:text-orange-600 shadow-md transition duration-300 rounded-md py-2 px-5 md:px-10 tracking-wide flex items-center gap-x-2"
          >
            <PhoneIcon className="w-6" />{" "}
            <span>
              ({phone.slice(0, 3)}) {phone.slice(3, 6)} - {phone.slice(6)}
            </span>
          </Link>

          <button
            type="button"
            onClick={(e) => {
              e.preventDefault();
              setOpen(true);
            }}
            className="group bg-orange-600 hover:bg-white border border-orange-600 text-white hover:text-orange-600 shadow-md transition duration-300 rounded-md py-2 px-8 md:px-10 tracking-wide"
          >
            Request a Quote
          </button>
        </div>

        {open && <LpModal open={open} setOpen={setOpen} />}
      </div>
    </div>
  );
}

Modal:

import { Fragment } from "react";
import { Dialog, Transition } from "@headlessui/react";
import { XMarkIcon } from "@heroicons/react/24/outline";

import LpForm from "../forms/lp";

export default function LpModal({ open, setOpen }: any) {
  return (
    <Transition.Root show={open} as={Fragment}>
      <Dialog as="div" className="relative z-10" onClose={setOpen}>
        <Transition.Child
          as={Fragment}
          enter="ease-out duration-300"
          enterFrom="opacity-0"
          enterTo="opacity-100"
          leave="ease-in duration-200"
          leaveFrom="opacity-100"
          leaveTo="opacity-0"
        >
          <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
        </Transition.Child>

        <div className="fixed inset-0 z-10 overflow-y-auto">
          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
            <Transition.Child
              as={Fragment}
              enter="ease-out duration-300"
              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
              enterTo="opacity-100 translate-y-0 sm:scale-100"
              leave="ease-in duration-200"
              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
            >
              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-8 text-left shadow-xl transition-all sm:my-8 w-full sm:max-w-lg sm:px-6 sm:py-8">
                <div className="absolute right-0 top-0 pr-2 pt-2">
                  <button
                    type="button"
                    className="text-gray-400 hover:text-gray-500 focus:ring-offset-0"
                    onClick={() => setOpen(false)}
                  >
                    <span className="sr-only">Close</span>
                    <XMarkIcon className="h-6 w-6" aria-hidden="true" />
                  </button>
                </div>
                <LpForm setOpen={setOpen} />
              </Dialog.Panel>
            </Transition.Child>
          </div>
        </div>
      </Dialog>
    </Transition.Root>
  );
}

Form inside the modal:

// @ts-nocheck
import { toast } from "react-toastify";
import Input from "react-phone-number-input/input";
import { Formik, Form, Field, ErrorMessage } from "formik";

export default function LpForm({ setOpen }: any) {
  const handleSubmit = async (values, { resetForm }) => {
    try {
      const formData = { ...values };
      // await fetch("/api/email", {
      //   method: "post",
      //   body: JSON.stringify(formData),
      // });
      toast.success("Email sent!");
      setOpen(false);
      resetForm();
    } catch (err) {
      console.error(err);
      toast.error("Submission error!");
    }
  };

  return (
    <>
      <Formik
        initialValues={{
          name: "",
          company: "",
          email: "",
          phone: "",
          message: "",
        }}
        validate={(values) => {
          const errors = {};

          if (!values.name) {
            errors.name = "Required *";
          }
          if (!values.company) {
            errors.company = "Required *";
          }
          if (!values.email) {
            errors.email = "Required *";
          } else if (
            !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{3,}$/i.test(values.email)
          ) {
            errors.email = "Invalid email address *";
          }
          if (!values.phone) {
            errors.phone = "Required *";
          } else if (values.phone.replace(/[^0-9]/g, "").length <= 10) {
            errors.phone = "Invalid phone number *";
          }
          if (!values.message) {
            errors.message = "Required *";
          }

          return errors;
        }}
        onSubmit={handleSubmit}
      >
        <Form className="bg-white border-custom-b border-[12px] shadow-xl max-w-3xl m-auto p-5">
          <div>
            <p className="text-gray-900/60 font-custom font-semibold tracking-wide text-2xl sm:text-3xl md:text-2xl xl:text-3xl 2xl:text-4xl">
              Start Your Branding Journey now!
            </p>

            <div className="py-5 grid grid-cols-1 gap-y-3">
              <div>
                <Field
                  required
                  type="text"
                  name="name"
                  placeholder="Name"
                  className="block w-full border-gray-300 shadow-sm focus:border-custom-b focus:ring-custom-b sm:text-sm"
                />
                <ErrorMessage
                  name="name"
                  component="div"
                  className="mt-1 text-red-500 text-xs"
                />
              </div>

              <div>
                <Field
                  required
                  type="text"
                  name="company"
                  placeholder="Company"
                  className="block w-full border-gray-300 shadow-sm focus:border-custom-b focus:ring-custom-b sm:text-sm"
                />
                <ErrorMessage
                  name="company"
                  component="div"
                  className="mt-1 text-red-500 text-xs"
                />
              </div>

              <div>
                <Field
                  required
                  type="email"
                  name="email"
                  placeholder="Email"
                  className="block w-full border-gray-300 shadow-sm focus:border-custom-b focus:ring-custom-b sm:text-sm"
                />
                <ErrorMessage
                  name="email"
                  component="div"
                  className="mt-1 text-red-500 text-xs"
                />
              </div>

              <div>
                <Field name="phone">
                  {({ field }) => (
                    <Input
                      {...field}
                      name="phone"
                      country="US"
                      onChange={(value) =>
                        field.onChange(field.name)(value || "")
                      }
                      limitmaxlength={"true"}
                      maxLength={14}
                      required
                      placeholder="Phone"
                      className="block w-full border-gray-300 shadow-sm focus:border-custom-b focus:ring-custom-b sm:text-sm"
                    />
                  )}
                </Field>
                <ErrorMessage
                  name="phone"
                  component="div"
                  className="mt-1 text-red-500 text-xs"
                />
              </div>

              <div>
                <Field
                  required
                  as="textarea"
                  name="message"
                  placeholder="What do you desire?"
                  rows={5}
                  className="block w-full border-gray-300 shadow-sm focus:border-custom-b focus:ring-custom-b sm:text-sm"
                />
                <ErrorMessage
                  name="message"
                  component="div"
                  className="mt-1 text-red-500 text-xs"
                />
              </div>
            </div>
          </div>

          <div className="flex justify-center">
            <button
              type="submit"
              className="group bg-green-600 hover:bg-white border border-green-600 text-white hover:text-green-600 transition duration-300 shadow-sm py-2 px-4"
            >
              Let's Get Started!
            </button>
          </div>
        </Form>
      </Formik>
    </>
  );
}