I get a problem when making an interface on Typescript!

export interface Content {
  uuid?: string;
  brand_id?: string;
  brand_name?: string;
  is_active?: boolean;
}

export interface Pageable {
  sort?: Sort;
  pageSize?: number;
  pageNumber?: number;
  offset?: number;
  unpaged?: boolean;
  paged?: boolean;
}

export interface Sort {
  sorted?: boolean;
  unsorted?: boolean;
  empty?: boolean;
}

export interface BrandData {
  content?: Content;
  pageable?: Pageable;
  numberOfElements?: number;
  number?: number;
  sort?: Sort;
  size?: number;
  first?: boolean;
  last?: boolean;
  empty?: boolean;
}
export interface BrandResponse {
  readonly data?: BrandData[];
}

and then i want to get data in react component like this

const { brands } = useSelector((state: AppState) => state.catalogs.brands);
const [brandData, setBrandData] = React.useState(brands.data);
const [currentPage, setCurrentPage] = React.useState(brandData.pageable.pageNumber);

then the error exits like this Property 'pageable' does not exist on type 'BrandData[]'.