React and the Missing Children

Button.tsx

// Button.tsx
interface Props {
  onClick: (event: MouseEvent<HTMLButtonElement>) => void;
  children: string;
}
export const Button: FC<Props> = ({ onClick, children }) => {
 return (
  <button onClick={onClick}>
   {children}
  </button>
 );
};
    
// usage
<Button>Click Me</Button>

ButtonFailed.tsx

// When children type is string - this will result with the following typescript error: 
// Type 'Element' is not assignable to type 'string'

<Button>
 <div className="style-that-modify-the-button">
   Click Me
 </div>
</Button>

ErrorMessage.tsx

// ErrorMessage
import React, {FC} from 'react';
const ErrorMessage: FC = () =>  {
  const { uiStore } = useStores();
  
  if(!uiStore.error) {
    return null;
  }
  return <div className="error-message">{uiStore.error}</div>
}
// usage
<ErrorMessage/>

message.tsx

import React, {FC} from 'react';

interface Props {} // no need to define children

const Message: FC<Props> = ({ children }) =>  (
  <div>{children}</div>
);

Solution.tsx

import React, {FC, ReactNode} from 'react';

interface Props {
  children: ReactNode;
}

const Message: FC<Props> = ({ children }) =>  (
  <div>{children}</div>
);

use like this:

https://gist.github.com/yuvalbl/a1b073ab4430117bf9e4bbb9d24bd71e?file=Solution.tsx