fix: moved some things outside of the OnboardContainer

this prevents refreshing of the entire styled component on render

ts/components/registration/components/OnboardingContainer.tsx

@@ -2,14 +2,6 @@ import { motion } from 'framer-motion';
 import { ReactNode } from 'react';
 import styled from 'styled-components';
 
-type OnboardContainerProps = {
-  animate?: boolean;
-  children: ReactNode;
-  key: string;
-};
-
-export const OnboardContainer = (props: OnboardContainerProps) => {
-  const { animate = false, children, key } = props;
 const OnboardContainerInner = styled(motion.div)`
   width: 100%;
 `;
@@ -20,6 +12,15 @@ export const OnboardContainer = (props: OnboardContainerProps) => {
   exit: { opacity: 0 },
 };
 
+type OnboardContainerProps = {
+  animate?: boolean;
+  children: ReactNode;
+  key: string;
+};
+
+export const OnboardContainer = (props: OnboardContainerProps) => {
+  const { animate = false, children, key } = props;
+
   return (
     <OnboardContainerInner
       key={key}