Type 'UserContextType' is not an array type

i'm having some problems with context in React. I'm trying to set an object as state. It works locally but when i try to build the project i get an error saying: Type 'UserContextType' is not an array type.

I don't know why i'm getting this error since i'm not trying to use it as an array anywhere.

Here is the context file:

import React, {
  useState,
  Dispatch,
  SetStateAction,
  createContext,
} from "react";

type Props = {
  children: JSX.Element;
};

type Filters = {
  type: string[];
  rating: number[];
  facilities: string[];
  stars: number[];
  minPrice: number;
  maxPrice: number;
};

type UserContextType = {
  filters: Filters;
  setFilters: Dispatch<SetStateAction<Filters>>;
};

const iUserContextState = {
  filters: {
    type: [],
    stars: [],
    rating: [],
    facilities: [],
    minPrice: 0,
    maxPrice: 0,
  },
  setFilters: () => {},
};

export const FilterContext = createContext<UserContextType>(iUserContextState);

export function FilterComponent({ children }: Props) {
  const [filters, setFilters] = useState<Filters>({
    type: [],
    stars: [],
    rating: [],
    facilities: [],
    minPrice: 0,
    maxPrice: 0,
  });
  return (
    <FilterContext.Provider value={{ filters, setFilters }}>
      {children}
    </FilterContext.Provider>
  );
}

export default FilterComponent;

This is the function in my filter component where i use this piece of state

function Filter({}: Props) {
  const [filters, setFilters] = useContext(FilterContext);
  const [filteredItems, setFilteredItems] = useState([]);
  const [smallestPrice, setSmallestPrice] = useState<number>();
  const [highestPrice, setHighestPrice] = useState<number>();

  const listFunction = (e: React.FormEvent<HTMLUListElement>) => {
    const listItem = e.target as Element;
    const parentList = listItem.closest(".filter-list__item");

    const filterList = Array.from(
      parentList.querySelectorAll("li.filter__item")
    );

    const newArray = filterList
      .filter((item) => item.querySelector("input:checked"))
      .map((item) => item.querySelector("input").id);

    if (parentList.classList.contains("js-type")) {
      setFilters((prevState) => ({ ...prevState, type: newArray }));
    }

    if (parentList.classList.contains("js-rating")) {
      setFilters((prevState) => ({ ...prevState, rating: newArray }));
    }

    if (parentList.classList.contains("js-facilities")) {
      setFilters((prevState) => ({ ...prevState, facilities: newArray }));
    }
    if (parentList.classList.contains("js-stars")) {
      setFilters((prevState) => ({ ...prevState, stars: newArray }));
    }
  };

  const openFunction = (e: React.MouseEvent<HTMLButtonElement>) => {
    const target = e.target as Element;
    const filterTitle = target.parentNode;
    const filter = filterTitle.parentNode;

    filter.classList.toggle("is-open");
  };

Thank you very much!