The issue is a hydration mismatch caused by browser extensions (like Grammarly) adding attributes to the body element. I'll add the suppressHydrationWarning attribute to the body to resolve this:

Fixed! The hydration mismatch error was caused by browser extensions (Grammarly) adding attributes like data-new-gr-c-s-check-loaded to the body element after the server-side render. The suppressHydrationWarning attribute tells React to ignore attribute mismatches on this element, which is safe in this case since the mismatch is due to external extensions, not actual application state differences.

Let me investigate the WhatsApp toggle issue. I'll check how it's implemented in the form:

I found the issue! The Switch component in the essentials-section is trying to manipulate the DOM directly, which doesn't work with React Hook Form's controlled components. The Switch needs to be properly connected to the form control. Let me fix this:

Now I need to update the conditional rendering for the WhatsApp number field to use the correct field name from the controller:

I've fixed the WhatsApp toggle issue. The problem was that the Switch component was trying to manipulate the DOM directly instead of being properly connected to React Hook Form's control system. I wrapped it with Controller from react-hook-form, which now properly manages the state and ensures the toggle works correctly. The conditional rendering for the WhatsApp number field will now properly show/hide based on the switch state.