Extend regular HTML Elements with React & TypeScript

GreenBox.tsx

// We extend from React.HTMLAttributes to get all the HTML attributes
// Don't extend React.HTMLProps!
export interface IGreenBoxProps extends React.HTMLAttributes<HTMLDivElement> {
    title: string;
}

class GreenBox extends React.Component<IGreenBoxProps, void> {
    public render() {
        // If you don't spread children and title, the restProps
        // still contain these props and compiler will say "no"
        const {children, title, ...divAttributes} = this.props;

        return (
            <div {...divAttributes} style={{backgroundColor: "green"}}>
                <h1>{title}</h1>
                {children}
            </div>
        );
    }
}

const myGreenBox = <GreenBox title="Hello" onClick={() => alert("Hello")}/>;

Or if you know that you are not going to use ref, you don't need and this works perfectly:
extends ComponentPropsWithoutRef<'div'>
or : DetailedHTMLFactory<HTMLAttributes<HTMLDivElement>, HTMLDivElement> <= this is the exact react definition