How to fix Props interface must extend React.PropsWithChildren for correct typing in React

import React from 'react';

interface ButtonProps {
  backgroundColor: string;
  onClick: () => void;
}

// Wrap your props with PropsWithChildren
const Button = ({ backgroundColor, onClick, children }: React.PropsWithChildren<ButtonProps>) => {
  return (
    <button style={{ backgroundColor }} onClick={onClick}>
      {children}
    </button>
  );
};

import React from 'react';

interface CardProps extends React.PropsWithChildren {
  title: string;
  variant?: 'primary' | 'secondary';
}

const Card = ({ title, variant = 'primary', children }: CardProps) => {
  return (
    <div className={`card card-${variant}`}>
      <h2>{title}</h2>
      <div className="card-content">{children}</div>
    </div>
  );
};

import React, { ReactNode } from 'react';

// Optional children
interface ContainerProps {
  className?: string;
  children?: ReactNode;
}

// Required children
interface WrapperProps {
  id: string;
  children: ReactNode; // No question mark makes it required
}

const Container = ({ className, children }: ContainerProps) => {
  return <div className={className}>{children}</div>;
};

const Wrapper = ({ id, children }: WrapperProps) => {
  return <section id={id}>{children}</section>;
};

import React from 'react';

// Before React 18 (children was implicit)
// const Layout: React.FC<{ title: string }> = ({ title, children }) => { ... }

// After React 18 (children must be explicit)
interface LayoutProps {
  title: string;
  children?: React.ReactNode;
}

const Layout: React.FC<LayoutProps> = ({ title, children }) => {
  return (
    <div>
      <h1>{title}</h1>
      <main>{children}</main>
    </div>
  );
};

// Or use PropsWithChildren
const Layout: React.FC<React.PropsWithChildren<{ title: string }>> = ({ title, children }) => {
  return (
    <div>
      <h1>{title}</h1>
      <main>{children}</main>
    </div>
  );
};