Generics error with forwardRef: Property 'ref' does not exist on type 'IntrinsicAttributes'

So the main problem here is that you're returning the result of React.forwardRef in your render, which isn't a valid return type for the render func. You'd need to define the forwardRef result as it's own component, and then render that inside your WithGenericsButton higher order component, like so:

import * as React from "react";

interface SimpleProps<T extends string> {
  random: T;
}

interface Props {
  children: React.ReactNode;
  color: string;
}

function WithGenericsButton<T extends string>(
  props: Props & SimpleProps<T> & { ref: React.Ref<HTMLButtonElement> }
) {
  type CombinedProps = Props & SimpleProps<T>;
  const Button = React.forwardRef<HTMLButtonElement, CombinedProps>(
    ({ children, ...otherProps }, ref) => (
      <button ref={ref} className="FancyButton" {...otherProps}>
        {children}
      </button>
    )
  );
  return <Button {...props} />;
}

const App: React.FC = () => {
  const ref = React.useRef<HTMLButtonElement>(null);
  return (
    <WithGenericsButton<string> ref={ref} color="green" random="foo">
      Click me!
    </WithGenericsButton>
  );
};

If you put that in a sandbox or playground you'll see that props is now typed correctly including a random prop of T

The problem that you are getting is because of this function:

function WithGenericsButton<T extends string>() {
  return React.forwardRef<HTMLButtonElement, Props & SimpleProps<T>>(
    ({ children, ...otherProps }, ref) => (
      <button ref={ref} className="FancyButton" {...otherProps}>
        {children}
      </button>
    )
  );
}

WithGenericsButton is not a component. It is a js function that returns a component. TS is basically telling you: hey the component WithGenericsButton (because you are using it as one) doesn't have a prop called children and it is right, it doesn't.

In your case to get a component that you can render you'll need to do something like this: const StringButton = WithGenericsButton<string>();