ionalert | beautiful design Android Alert Dialog , alternative | Android library

I'm working on an Ionic React Project running on top of Capacitor and I need to show a Toast message , everytime there's no internet connection. To get network and connectivity information, I'm using Network Capacitor Plugin: https://capacitorjs.com/docs/apis/network I'm using Context hook for using props everywhere in the app.

In MyContext.tsx I have declared the necessary constants as following:

I'm developing an app using Capacitor, Ionic, React and recently I faced the following error, while using React Hook Form and YupResolver for the first time:

When I try to run the project, I get this error:

I’m working on an Ionic React App running on top of Capacitor. It works fine with axios requests in browser, but on Android I have CORS issues, that’s why I’m using the community HTTP plugin:https://github.com/capacitor-community/http

Example: I click on my Login button. My data such as email and password are supposed to be sent via HTTP post, but it catches the error I have put there: Try again’ .

Do you have any idea why it might happen?

No error logs regarding the request on Android Studio either. Only these:

How do I add an automatic dismiss dialog after a time to the show alert function?

I want to create a registration form, where all the fields are required. I'm using React Hook Form and Yup for form validaton. All fields are required, including two checkboxes. When I submit the form, I get this error for checkboxes:

termsOfUse must be a boolean type, but the final value was: "on".

I think that this means I am trying to save the string value 'on' into the yup field, which requires a boolean. This is because of the checkbox is passing target.value instead of target.checked: {...register("privacyPolicy")}

I still don't know how to pass 'checked' instead of 'value' and use checkbox inputs in RHF in general. Any help would be really appreciated. Thank you :)

The component:

I created an alert based on the http response of the api. I make a separate ts file for login function. What I want is to call or display the alert based on the response. My code works if the function is not separated from the component. But when I do it is not working. Im new to react and ionic.

Login.tsx

I'll shortly preface by saying I've been at this for hours and feel like I've tried everything out there. I also left out a lot of code from my component, that I believe is unrelated to the issue. The user will see this component, EditEpic, when they are trying to edit an epic object (entry in db). Here the user can also delete the object from the db which is what I am trying to do now. After deletion, the user will be taken back to the previous page. That is where I am getting the issue. Here is the code