fix: handle stickyness when scrolling is locked

components/GuestsRoomsPicker/ChildSelector/ChildInfoSelector.tsx

@@ -15,6 +15,11 @@ import {
   ChildInfoSelectorProps,
 } from "@/types/components/bookingWidget/guestsRoomsPicker"
 
+const ageList = Array.from(Array(13).keys()).map((age) => ({
+  label: age.toString(),
+  value: age,
+}))
+
 export default function ChildInfoSelector({
   child = { age: -1, bed: -1 },
   childrenInAdultsBed,
@@ -28,11 +33,6 @@ export default function ChildInfoSelector({
   const bedLabel = intl.formatMessage({ id: "Bed" })
   const { setValue, formState } = useFormContext()
 
-  const ageList = Array.from(Array(13).keys()).map((age) => ({
-    label: `${age}`,
-    value: age,
-  }))
-
   function updateSelectedAge(age: number) {
     setValue(`rooms.${roomIndex}.child.${index}.age`, age, {
       shouldValidate: true,
@@ -74,7 +74,8 @@ export default function ChildInfoSelector({
     return availableBedTypes
   }
 
-  console.log("ALL TJHE ERORRORS", formState.errors)
+  //@ts-expect-error: formState is typed with FormValues
+  const roomErrors = formState.errors.rooms?.[roomIndex]?.child?.[index]
   return (
     <>
       <div key={index} className={styles.childInfoContainer}>
@@ -110,12 +111,12 @@ export default function ChildInfoSelector({
         </div>
       </div>
 
-      {/* {isValidated && child.age < 0 ? (
+      {roomErrors ? (
         <Caption color="red" className={styles.error}>
           <ErrorCircleIcon color="red" />
           {ageReqdErrMsg}
         </Caption>
-      ) : null} */}
+      ) : null}
     </>
   )
 }