privacypolicy | EU Cookie Directive , and the privacy requirements

The thing I'm trying is a multipage react app where I can navigate between pages(like from the main route '/' to '/whitepape' or 'privacyPolicy'), but I have 4 different routes('/', 'services', 'features', 'contactUs') within the main route '/' which use react-scroll to get the scrolling between those 4 components whose links are added in the Navbar(this part works as expected).

But navigating between pages like replacing entirely all 4 components with whitepaper page or privacyPolicy page, with Navbar and Footer at the same place so that I can navigate back to home.

This is what I’m stuck at any help is appreciated I’m not sure I’m following the right way to implement what I need. I have been using React Navigation in react native which is simple to understand and straightforward, wish react-router was so straight forward instead react-router is a bit confusing.

App.js

I have the following markup to display a fixed footer in the main layout:

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:

In a React project, I have certain Pages/Components which has common structure with few variations. See the code below for clarity

So I am trying to link out to my privacy policy from the footer through the following:

so I am trying to test a form which is implemented in react. When I submit a form through jest, I get a different event as when I submit the event through the browser.

The test I am using is this one:

I have the following code. All this code does is takes a few items from a user's pc then uploads them to a website.

I have a variable set to an object:

I've eliminated all the ways of 'next' being called twice to prevent loops. Everything seems to work except what's going on inside the if (authenticated) block. The goal is to keep the user stuck at the RegisterFlow page until they've verified & provided a display name. Where am I going wrong?

Error: Uncaught (in promise) RangeError: Maximum call stack size exceeded

Code: