Fix ts issues

Author: simon-debruijn

src/pages/CityPicker.tsx

@@ -6,7 +6,7 @@ import { City, useGetCitiesByQuery } from '@/hooks/api/cities';
 import { Countries, Country } from '@/types/Country';
 import { FormElement } from '@/ui/FormElement';
 import { getStackProps, Stack, StackProps } from '@/ui/Stack';
-import { Typeahead } from '@/ui/Typeahead';
+import { Typeahead, TypeaheadElement } from '@/ui/Typeahead';
 import { valueToArray } from '@/utils/valueToArray';
 
 import { SupportedLanguages } from '../i18n';
@@ -20,7 +20,7 @@ type Props = Omit<StackProps, 'onChange'> & {
   error?: string;
 };
 
-const CityPicker = forwardRef<HTMLInputElement, Props>(
+const CityPicker = forwardRef<TypeaheadElement<City>, Props>(
   (
     { offerId, country, name, value, onChange, onBlur, error, ...props },
     ref,

src/ui/Typeahead.tsx

@@ -1,6 +1,6 @@
 import 'react-bootstrap-typeahead/css/Typeahead.css';
 
-import type { ForwardedRef } from 'react';
+import type { ForwardedRef, Ref } from 'react';
 import { forwardRef } from 'react';
 import type { TypeaheadModel } from 'react-bootstrap-typeahead';
 import { AsyncTypeahead as BootstrapTypeahead } from 'react-bootstrap-typeahead';
@@ -86,7 +86,7 @@ const TypeaheadInner = <T extends TypeaheadModel>(
       disabled={disabled}
       className={className}
       flex={1}
-      ref={ref}
+      ref={ref as unknown as Ref<HTMLElement>}
       css={`
         input[type='time']::-webkit-calendar-picker-indicator {
           display: none;