fix: rendering errors when applying components to children that are already applying to children

apps/scandic-web/components/DatePicker/Range/Mobile.tsx

@@ -3,13 +3,13 @@ import { DayPicker } from "react-day-picker"
 import { useIntl } from "react-intl"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { Lang } from "@/constants/languages"
 import { dt } from "@/lib/dt"
 
 import Button from "@/components/TempDesignSystem/Button"
 import Body from "@/components/TempDesignSystem/Text/Body"
-import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import useLang from "@/hooks/useLang"
 
 import { locales } from "../locales"
@@ -86,9 +86,9 @@ export default function DatePickerRangeMobile({
           MonthCaption(props) {
             return (
               <div className={props.className}>
-                <Subtitle asChild type="two">
-                  {props.children}
-                </Subtitle>
+                <Typography variant="Title/Subtitle/md">
+                  <h3>{props.children}</h3>
+                </Typography>
               </div>
             )
           },