typescript ругается на вызов функции в react компоненте

Использую custom hook useLocalStorage.

import { useState, useEffect } from "react";

interface ILocalStorage {
  name: string;
  isLogined: boolean;
}

export const useLocalStorage = (key: string) => {
  const [data, setData] = useState<ILocalStorage[]>();

  useEffect(() => {
    const itemFromLocalStorage = localStorage.getItem(key);
    if (itemFromLocalStorage === null) {
      return;
    }
    const res = JSON.parse(itemFromLocalStorage);
    setData(res);
  }, [key]);
  const saveData = (newData: ILocalStorage[]) => {
    localStorage.setItem(key, JSON.stringify(newData));
    setData(newData);
  };

  return [data, saveData];
};

Kомпонент в котором использую.

import cn from "classnames";
import styles from "./SignIn.module.css";
import { useContext, useRef, useState } from "react";
import { Heading } from "../../components/Heading/Heading";
import { Input } from "../../components/Input/Input";
import { Button } from "../../components/Button/Button";
import { useLocalStorage } from "../../hook/useLocalStorage";
import { UserContext } from "../../context/users.context";
import { IUSerContext } from "../../context/UserContext.props";

export const SignIn = () => {
  const [isValid, setIsValid] = useState<boolean>(true);
  const userName = useRef<HTMLInputElement>(null);
  const [data, saveData] = useLocalStorage("users");
  const { setCurrentUser } = useContext(UserContext) as IUSerContext;

  const setUserName = () => {
    setIsValid(false);
    if (userName.current !== null) {
      const valueInput = userName.current.value.trim();
      setIsValid(true);
      const newUser = { name: valueInput, isLogined: true };
        const arr = [newUser, ...[data]];
        saveData(arr);
        setCurrentUser(newUser);
        userName.current.value = "";
    }
  };
  return (
    <div className={cn(styles["sign-in"])}>
      <Heading>Вход</Heading>
      <Input
        ref={userName}
        isValid={isValid}
        isIcon={false}
        placeholder={"Ваше имя"}
      />
      <Button onClick={setUserName}>Войти в профиль</Button>
    </div>
  );
};

При использовании его в компоненте функция saveData подчеркивается красным и выводит следующую ошибку:

This expression is not callable.
  Not all constituents of type 'ILocalStorage[] | ((newData: ILocalStorage[]) => void)' are callable.
    Type 'ILocalStorage[]' has no call signatures.ts(2349)
Cannot invoke an object which is possibly 'undefined'.ts(2722)
const saveData: ILocalStorage[] | ((newData: ILocalStorage[]) => void) | undefined

Помогите не могу разобраться