Hello i have trouble when i build my next js app. it says

.next/types/app/(dashboard)/approval/view/page.ts:28:13

Property 'surat' is incompatible with index signature.
    Type 'SuratApprovalType' is not assignable to type 'never'

i have narrowed of files that might be causing this type

this is my component that got error

srcapp(dashboard)approvalviewpage.tsx

type SuratApprovalType = {
  file: string;
  tipeSurat: string;
  judul: string;
  status: string;
  suratId: string;
  userId: string;
}

interface DocViewApprovalProps {
  surat: SuratApprovalType;
  suratId: string;
}

function DocViewApproval({ surat, suratId }: DocViewApprovalProps) {
  return(<p className="text-black"> testing </p>)
}

this is the page that use the component above

srcapp(dashboard)approvalcomponentsdialog.tsx

import { DialogContent } from "@/components/ui/dialog";
import useSWR from "swr";
import { user } from "@/signals/userSignal";
import DocViewApproval from "../view/page";
import { useSignals } from "@preact/signals-react/runtime";
const domain = process.env.NEXT_PUBLIC_DOMAIN_URL;

interface Props {
  suratId: string | undefined | null;
}

type SuratApprovalType = {
  file: string;
  tipeSurat: string;
  judul: string;
  status: string;
  suratId: string;
  userId: string;
}

type Data = {
  file: string;
  tipeSurat: string;
  judul: string;
  status: string;
}

const fetcher = (url: string) => fetch(url).then((res) => res.json());

export function LogDialog({ suratId }: Props) {
  useSignals()
  const userId: string | undefined = user.value?.id;
  const { data, isLoading, error } = useSWR<Data>(
    suratId ? `${domain}/api/surat/getSuratList?id=${suratId}` : null,
    fetcher
  );

  if (isLoading) return <p className="text-black">Loading...</p>;
  if (error) return <p className="text-black">Failed to load surat data</p>;

  if (data && userId && suratId) {
    const surat:SuratApprovalType = { ...data, suratId, userId };
    return (
      <DialogContent className="flex flex-col w-[95%] text-black h-[90%]">
        {surat !== null ? (
          <DocViewApproval surat={surat} suratId={suratId} />
        ) : (
          <div>Surat not found.</div>
        )}
      </DialogContent>
    );
  }
}

as far i can do to solve the problem is to delete the props of DocViewApproval({ surat, suratId }: DocViewApprovalProps) and the error wont show again but obviously it is not the solution im looking for. can someone point out what im doing wrong?

thanks