Extending and overriding interface properties

I'm trying to extend interface and can't seem to grasp the idea on generics. As you can see I'm trying to add property auth inside the props.

My code works but do I really need to re-import every properties on the extended interface? It seems that I'm doing something wrong here.

Inertia-JS Typescript Definition

export interface PageProps {
    [key: string]: unknown;
}

export interface Page<SharedProps = PageProps> {
    component: string;
    props: PageProps & SharedProps & {
        errors: Errors & ErrorBag;
    };
    url: string;
    version: string | null;
    scrollRegions: Array<{
        top: number;
        left: number;
    }>;
    rememberedState: Record<string, unknown>;
    resolvedErrors: Errors;
}

My Code:

export type User = {
  id: number;
  name: string;
  email: string;
}

interface PropsInterface extends Page {
  props: PageProps & {
    errors: Errors & ErrorBag;
    auth: {
      user: User
    }
  }
}

JSX

import { Page, PageProps } from '@inertiajs/inertia';
import { ErrorBag, Errors } from '@inertiajs/inertia/types/types';
import { usePage } from '@inertiajs/inertia-react';

export default function Topbar(): JSX.Element {
  const { url, component, props } = usePage<PropsInterface>();
  const { user } = props.auth
}