Next Js 13 error while running npx run build

Question

I have a file called layout.tsx as a client component and I import it on a app directory component and when I try to build the application this error page

Type error: Type 'OmitWithTag<{ user: User; cupons: Cupon[]; }, keyof LayoutProps, "default">' does not satisfy the constraint '{ [x: string]: never; }'.
  Property 'user' is incompatible with index signature.
    Type 'User' is not assignable to type 'never'.

  24 | 
  25 | // Check the prop type of the entry function
> 26 | checkFields<Diff<LayoutProps, FirstArg<TEntry['default']>, 'default'>>()
     |             ^
  27 | 
  28 | // Check the arguments and return type of the generateMetadata function
  29 | if ('generateMetadata' in entry) {

This is the code inside the layout.tsx file

"use client";
import React from "react";
import Container from "@/components/ui/container";
import NextImage from "next/image";
import moment from "moment";
import { User, Cupon } from "@/types";

const Layout = ({ user, cupons }: { user: User; cupons: Cupon[] }) => {
  // map through cupons and find the ones which id match to user.cupons
  const userCoupons = user.cupons
    .map((userCupon: any) => {
      return cupons.find((cupon: any) => cupon.id === userCupon.cuponId);
    })
    .filter(Boolean);
  return (
    <Container>
      <div className="flex flex-col mt-20 p-3 space-y-3">
        <h1 className="text-3xl font-bold text-left">User Page</h1>
        <div className="flex items-start justify-start gap-7">
          <NextImage
            alt="user_img"
            src={user.image}
            width={400}
            height={400}
            className="rounded-md"
          />
          <div className="flex flex-col items-start justify-start pt-3">
            <h1 className="text-2xl font-semibold text-left">
              Personal Information
            </h1>
            <hr className="w-full text-black" />

            <h1 className="text-[17px] font-semibold text-left text-slate-900 opacity-75 mt-3">
              Name: {user.name}
            </h1>
            <h1 className="text-[17px] font-semibold text-left text-slate-900 opacity-75 mt-3">
              Username: {`@${user.name.split(" ").join("_").toLowerCase()}`}
            </h1>
            <h1 className="text-[17px] font-semibold text-left text-slate-900 opacity-75">
              Email: {user.email}
            </h1>
            <h1 className="text-[17px] font-semibold text-left text-slate-900 opacity-75">
              Cupons Claimed: {user.cupons.length}
            </h1>
            <h1 className="text-[17px] font-semibold text-left text-slate-900 opacity-75">
              User Since: {moment(user.createdAt).format("DD/MM/YYYY")}
            </h1>
            <br />
            <br />
            <h1 className="text-2xl font-semibold text-left">
              Accoutnt Security
            </h1>
            <hr className="w-full text-black" />
            <h1 className="text-[17px] font-semibold text-left text-slate-900 opacity-75 mt-3">
              Auth provider: {user.accounts[0].provider}
            </h1>
            <h1 className="text-[17px] font-semibold text-left text-slate-900 opacity-75">
              User ID: {user.accounts[0].id}
            </h1>
            <h1 className="text-[17px] font-semibold text-left text-slate-900 opacity-75">
              Auth type: {user.accounts[0].type}
            </h1>
          </div>
          {/*
            cupons claimed by user
          */}
          <div className="flex flex-col items-start justify-start pt-3">
            <h1 className="text-2xl font-semibold text-left">Cupons Claimed</h1>
            <hr className="w-full text-black" />
            {userCoupons.map((cupon: any) => (
              <div
                key={cupon.id}
                className="flex items-start justify-start mt-3 bg-gray-300 bg-opacity-40 p-3 rounded-md w-full"
              >
                <h1 className="text-[17px] font-semibold text-left text-slate-900 opacity-75">
                  Cupon ID: {cupon.id}
                </h1>
                <h1 className="text-[17px] font-semibold text-left text-slate-900 opacity-75">
                  Cupon Code: {cupon.code}
                </h1>
                <h1 className="text-[17px] font-semibold text-left text-slate-900 opacity-75">
                  Cupon Value: {cupon.value}
                </h1>
              </div>
            ))}
          </div>
        </div>
      </div>
    </Container>
  );
};

export default Layout;

And this is the code inside the page.tsx file

import React from "react";
import Layout from "../components/layout";
import getCupons from "@/actions/get-cupons";

interface UserPageProps {
  params: {
    userId: string;
    storeId: string;
  };
}

const UserPage: React.FC<UserPageProps> = async ({ params }) => {
  const user = (await getUser(params.userId)) as any;
  const cupons = (await getCupons(params.storeId)) as any;
  const { userData } = JSON.parse(user) as any;
  return (
    <div>
      <Layout user={userData} cupons={cupons} />
    </div>
  );
};

export default UserPage;

This error keeps repeating even if I change the props type to different types. I have tried to use interfaces but still the error hasn't been fixed.