NextJS - Close Modal Component from Child inner Component - reactjs

Question

I am using the Modal Component from React Bootstrap Everything works as expected, except from the fact that I cannot figure out how to auto close the Modal after a successful submit.
I know I am able to call the onHide fuction from the Modal component like this at button click:
<Button onClick={props.onHide}>Close</Button>
Is there a way to auto call this onHide function if, and only if there is a successful submit form the MailingListSendgrid component?
index.js
<ModalMailingList show={modalShow} onHide={() => setModalShow(false)} />
ModalMailingList.js
import Modal from "react-bootstrap/Modal";
import MailingListSendgrid from "#/components/MailingListSendgrid";
export default function ModalMailingList(props) {
return (
<Modal
{...props}
size="lg"
aria-labelledby="contained-modal-title-vcenter"
centered
className="special_modal" //Add class name here
>
<Modal.Header closeButton></Modal.Header>
<Modal.Body>
<MailingListSendgrid />
</Modal.Body>
</Modal>
);
}
MailingListSendgrid.js
.
.
.
.
const MailingListSendgrid = () => {
const [isError, setIsError] = useState(true);
const [shakeIt, setshakeIt] = useState(false);
const [mail, setMail] = useState("");
const [isLoading, setLoading] = useState(false);
const [message, setMessage] = useState(null);
const subscribe = () => {
const regEx = /[a-zA-Z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,8}(.[a-z{2,8}])?/g;
setMail("");
if (!regEx.test(mail) && mail !== "") {
setIsError(true);
setshakeIt(true);
setMessage("Email is Not Valid");
setTimeout(() => {
setshakeIt(false);
}, 1000);
} else if (mail === "") {
setIsError(true);
setshakeIt(true);
setMessage("Email is Empty");
setTimeout(() => {
setshakeIt(false);
}, 1000);
} else {
setLoading(true);
axios
.put("api/MailingList", {
mail,
})
.then((result) => {
if (result.status === 200) {
setIsError(false);
setMessage(result.data.message);
setLoading(false);
}
})
.catch((err) => {
setIsError(true);
setMessage(err.data.message);
setLoading(false);
});
setMessage(null);
setshakeIt(false);
}
};
return (
.
.
.
<input
onChange={(e) => {
setMail(e.target.value);
}}
type="email"
className={`form-control required email w-auto text-center text-sm-start`}
placeholder={subscription.formPlaceholder}
value={mail}
autoComplete="email"
required
></input>
<button
type="submit"
name="subscribe"
onClick={subscribe}
className="input-group-text justify-content-center"
disabled={isLoading}
>
.
.
.
);
};
export default MailingListSendgrid;

Answer 1

I think that the best option here is to pass a function as a prop, thus still making the MailingListSendgrid reusable e.g.
<MailingListSendgrid onSubmit={()=> props.onHide()} />
And just use that in MailingListSendgrid if it was successfull.