Next js wont Childern type ReactNode wont render , unless i re-run npm run dev

it raises this error
Error
here is the Layout.tsx

import React, { ReactNode } from "react";
import HeaderComponent from "./headerComponent";

type ChildrenType = {
  children: ReactNode;
  className?: string;
};

const LayoutComponent: React.FC<ChildrenType> = ({ children, className }) => {
  return (
    <div className="min-h-screen bg-black text-center">
      <HeaderComponent />
      <main className={`flex-grow flex flex-col ${className}`}>{children}</main>
      this renders
    </div>
  );
};

export default LayoutComponent;

here is the Home/Index.tsx

import LayoutComponent from "@/components/layouts/layouts";
import React from "react";

const Index = () => {
  return (
    <LayoutComponent>
      <h2>This doesnt</h2>
    </LayoutComponent>
  );
};

export default Index;

Fast reload doesnt work

i tried to rm -rf the .nextjs but it doesnt work , and i have to rerun npm run dev so it reloads the childern component, but in the layout.tsx outside the {childern} props it re renders automatically.