¡Tengo un problema al hacer una interfaz en 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[]; }

y luego quiero obtener datos en un componente de reacción como este

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

entonces el error sale como esta Propiedad 'pageable' no existe en el tipo 'BrandData[]'.