docs(hooks): make sure example runs without ts errors (#3207)

* docs(hooks): make sure example runs without ts errors

I don't understand why ci wasn't red before now, but in https://app.circleci.com/pipelines/github/algolia/react-instantsearch/1614/workflows/de241179-b866-4dc6-b576-0a4de456f2fb/jobs/47848 it is

* easier

* pick

Author: Haroenv

examples/hooks/App.tsx

@@ -34,7 +34,10 @@ function Hit({ hit }: HitProps) {
       <span
         className="Hit-label"
         dangerouslySetInnerHTML={{
-          __html: (hit._highlightResult as any).name.value,
+          __html:
+            hit._highlightResult && hit._highlightResult.name
+              ? hit._highlightResult.name.value
+              : '',
         }}
       />
       <span className="Hit-price">${hit.price}</span>

examples/hooks/components/Hits.tsx

@@ -4,22 +4,23 @@ import { useHits, UseHitsProps } from 'react-instantsearch-hooks';
 
 import { cx } from '../cx';
 
-export type HitsProps = React.ComponentProps<'div'> &
+export type HitsProps<THit> = React.ComponentProps<'div'> &
   UseHitsProps & {
-    hitComponent: <THit extends AlgoliaHit<Record<string, unknown>>>(props: {
-      hit: THit;
-    }) => JSX.Element;
+    hitComponent: (props: { hit: THit }) => JSX.Element;
   };
 
-export function Hits({ hitComponent: Hit, ...props }: HitsProps) {
+export function Hits<THit extends AlgoliaHit<Record<string, unknown>>>({
+  hitComponent: Hit,
+  ...props
+}: HitsProps<THit>) {
   const { hits } = useHits(props);
 
   return (
     <div className={cx('ais-Hits', props.className)}>
       <ol className="ais-Hits-list">
         {hits.map((hit) => (
           <li key={hit.objectID} className="ais-Hits-item">
-            <Hit hit={hit} />
+            <Hit hit={hit as unknown as THit} />
           </li>
         ))}
       </ol>

examples/hooks/components/RefinementList.tsx

@@ -3,12 +3,14 @@ import {
   useRefinementList,
   UseRefinementListProps,
 } from 'react-instantsearch-hooks';
+import { RefinementListWidgetParams } from 'instantsearch.js/es/widgets/refinement-list/refinement-list';
 
 import { ControlledSearchBox } from './ControlledSearchBox';
 import { cx } from '../cx';
 
 export type RefinementListProps = React.ComponentProps<'div'> &
-  UseRefinementListProps;
+  UseRefinementListProps &
+  Pick<RefinementListWidgetParams, 'searchable' | 'searchablePlaceholder'>;
 
 export function RefinementList(props: RefinementListProps) {
   const {
@@ -81,7 +83,7 @@ export function RefinementList(props: RefinementListProps) {
               />
               <span
                 className="ais-RefinementList-labelText"
-                dangerouslySetInnerHTML={{ __html: item.highlighted }}
+                dangerouslySetInnerHTML={{ __html: item.highlighted! }}
               />
               <span className="ais-RefinementList-count">{item.count}</span>
             </label>

examples/hooks/components/SearchBox.tsx

@@ -5,7 +5,7 @@ import { ControlledSearchBox } from './ControlledSearchBox';
 
 export type SearchBoxProps = React.ComponentProps<'div'> & UseSearchBoxProps;
 
-export function SearchBox(props?: SearchBoxProps) {
+export function SearchBox(props: SearchBoxProps) {
   const { query, refine, isSearchStalled } = useSearchBox(props);
   const [value, setValue] = useState(query);
   const inputRef = useRef<HTMLInputElement>(null);