Typescript error showing in npm run build

I am new in next js. My problem is that when i am running npm run build, it is showing typescript error even though i am not using it in my project. I am implementation for internationalization and it works well. But npm run build command is showing ts error.

Layout.jsx

import Sidebar from "./Sidebar/page";
import SettingFloatButton from "./Button/SettingFloatButton";
import Navbar from "./Navbar/page";
const Layout = ({ children, lang }) => {
  return (
    <div>
      <div className="relative flex min-h-screen bg-gray-50 divide-x">
        <div className="min-h-full hidden bg-white xl:block lg:block md:block">
          <Sidebar lang={lang} />
        </div>
        <div className="flex flex-col flex-1">
          <Navbar lang={lang} />
          <div className="p-5 xl:p-10">
            <main>{children}</main>
            <SettingFloatButton lang={lang} />
          </div>
        </div>
      </div>
    </div>
  );
};

export default Layout;

my folder structure

error image

Even though i changed this file to tsx, that does not work

Error Text

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

Solution

I used context to solve as like the below. If there any suggestion to improve please let me know.

LangContext

"use client";
import { createContext, useContext, useState } from "react";

const LocaleContext = createContext();

export const LocaleProvider = ({ locale, children }) => {
  const [currentLocale, setCurrentLocale] = useState(locale);

  return (
    <LocaleContext.Provider value={{ currentLocale, setCurrentLocale }}>
      {children}
    </LocaleContext.Provider>
  );
};

export const useLocale = () => {
  return useContext(LocaleContext);
};

Layout.jsx

const Layout = ({ children }) => {
  return (
    <div>
      <div className="relative flex min-h-screen bg-gray-50 divide-x">
        <div className="min-h-full hidden bg-white xl:block lg:block md:block">
          <Sidebar />
        </div>
        <div className="flex flex-col flex-1">
          <Navbar />
          <div className="p-5 xl:p-10">
            <main>{children}</main>
            <SettingFloatButton />
          </div>
        </div>
      </div>
    </div>
  );
};

export default Layout;

RootLayout.jsx

export default async function RootLayout({ children, params: { locale } }) {
  const messages = await getMessages();

  return (
    <html lang={locale}>
      {/* TODO:remove suppressHydrationWarning={true} */}
      <NextIntlClientProvider messages={messages}>
        <body suppressHydrationWarning={false} className={inter.className}>
          <LocaleProvider locale={locale}>
            <TanStackProvider>
              <div>{children}</div>
            </TanStackProvider>
          </LocaleProvider>
          <Toaster position="top-right" reverseOrder={false} />
        </body>
      </NextIntlClientProvider>
    </html>
  );
}