Custom hook typing overload

export default function Characters() {
  const initialData = useLoaderData() as Awaited<
    ReturnType<ReturnType<typeof charactersLoader>>
  >;
  const charactersQuery = useCharacters({
    initialData,
  });

  if (
    charactersQuery.error instanceof Error
  ) {
    return <div>Error: {charactersQuery.error.message}</div>;
  }

  return (
    <div>
      <h1>Characters</h1>
      <Link to="/">Home</Link>

      <ul>
        {charactersQuery.data.results.map((character) => (
           // error is happening above
          <li key={character.id}>{character.name}</li>
        ))}
      </ul>
    </div>
  );
}

export const charactersQuery = () => ({
  queryKey: ['characters'],
  queryFn: getCharacters,
});

export function useCharacters({
  initialData,
}: {
  initialData?: z.infer<typeof characterSchema>;
}) {
  return useQuery({ ...charactersQuery(), initialData });
}