I have a custom hook called `useDropdownSelection`. It's fairly simple. Here's the code:

```
import { useState } from 'react'

export const useDropdownSelection = (initialValue: string) => {
  const [selectedOption, setSelectedOption] = useState<string>(initialValue)

  const handleClick = (event: React.MouseEvent<HTMLLIElement>) => {
    const target = event.target as HTMLElement
    setSelectedOption(target.innerText)
  }

  return [selectedOption, handleClick]
}

```

As you can see, the `handleClick` function is of type `(event: React.MouseEvent<HTMLLIElement>) => void`

But when I import it to my index.tsx, the `handleClick` function, for whatever reason, becomes of type `string | ((event: MouseEvent<HTMLLIElement, MouseEvent>) => void)`

```
const [selectedDropdownOption, handleDropdownClick] = useDropdownSelection('Most upvotes') // const handleDropdownClick: string | ((event: MouseEvent<HTMLLIElement, MouseEvent>) => void). WHY?

```

Why is this happening?

I assume it has something to do with the fact that I'm returning an array?