title: i have react custom hook error with typescript
body: <p>I have this error in VScode:
  Argument of type 'Animal[]' is not assignable to parameter of type 'string'.
  my custom hook file(useLocalHost.tsx) is:</p>
  <pre class="lang-js prettyprint-override"><code>import React, { useState, useEffect, SetStateAction, Dispatch } from &quot;react&quot;;
  import { Animal } from &quot;@frontendmasters/pet&quot;;
  
  function getSavedValue(key: string, initialValue: string) {
    
    const savedValue = JSON.parse(localStorage.getItem(key) || '{}');
  
    if (savedValue) {
      return savedValue;
    }
  
    return initialValue;
  }
  
  export default function useLocalStorage(key: string, initialValue: string) {
    const [value, setValue] = useState(() =&gt; {
      return getSavedValue(key, initialValue);
    });
  
    useEffect(() =&gt; {
      localStorage.setItem(key, JSON.stringify(value));
    }, [value]);
    return [value, setValue] as [Animal[], Dispatch&lt;SetStateAction&lt;Animal[] | null&gt;&gt;];
  }
  
  </code></pre>
  <p>my search file (searchParams.tsx) is:</p>
  <pre class="lang-js prettyprint-override"><code>import React, { useState, useEffect, useContext, FunctionComponent } from &quot;react&quot;;
  import pet, { ANIMALS, Animal } from &quot;@frontendmasters/pet&quot;;
  import useDropdown from &quot;./useDropdown&quot;;
  import { RouteComponentProps } from '@reach/router';
  import SearchResult from &quot;./SearchResult&quot;;
  import useLocalStorage from &quot;./useLocalStorage&quot;;
  import ThemeContext from &quot;./ThemeContext&quot;;
  
  const SearchParams: FunctionComponent&lt;RouteComponentProps&gt; = () =&gt; {
    const [location, updateLocation] = useState(&quot;Seattle, WA&quot;);
    const [breeds, updateBreeds] = useState([] as string[]);
    const [pets, updatePets] = useState([] as Animal[]);
    const [animal, AnimalDropdown] = useDropdown(&quot;Animal&quot;, &quot;dog&quot;, ANIMALS);
    const [breed, BreedDropdown, updateBreed] = useDropdown(&quot;Breed&quot;, &quot;&quot;, breeds);
    const [prevPet, setPrevPet] = useLocalStorage([] as Animal[], &quot;&quot;);
    const [theme, setTheme] = useContext(ThemeContext);
  
    async function requestPets() {
      const { animals } = await pet.animals({
        location,
        breed,
        type: animal,
      });
      setPrevPet(animals);
      updatePets(animals || []);
    }
  
    useEffect(() =&gt; {
      updateBreeds([]);
      updateBreed(&quot;&quot;);
      pet.breeds(animal).then(({ breeds }) =&gt; {
        const breedStrings = breeds.map(({ name }) =&gt; name);
        updateBreeds(breedStrings);
      }, console.error);
    }, [animal]);
  
    useEffect(() =&gt; {
      updatePets(prevPet);
    }, []);
  </code></pre>
  <p>I know that the error comes from the type of prevPet put I don't know what type it should be
  there is more in searchParams.tsx but I think it's not needed</p>