Try this, importing ReactChildren from react.

I wish i could explain this better, but i know typescript is expecting a JSX/TSX element, so we could use ReactElement for the return type.

For a better explanation on the children type

https://stackoverflow.com/a/58123882/7174241

import React, { ReactChildren, ReactElement, ReactNode } from "react";

interface RequireType {
  children: ReactChildren | ReactNode | ReactElement;
  required_permission: string;
}

const RequirePermission = ({ children, required_permission }: RequireType):ReactElement => {
  const user = useContext(AuthContext);

  let hasPermission = false;
  if (user.state == AuthState.Authorized) {
    user.user?.realm_access?.roles.forEach((role) => {
      if (permissions[role].includes(required_permission)) {
        hasPermission = true;
      }
    });
  }

 return <>{hasPermission ? children : null}</>

};

export default RequirePermission;

You can do it with a combination of types and a utility function that will enforce the props for the given component:

type ComponentAndProps<C extends React.ElementType<any>> = [C, React.ComponentPropsWithRef<C>];
type WrapperSet = ComponentAndProps< React.ElementType<any> >[];

function makeGroup<C extends React.ElementType<any>>(Component: C, props: React.ComponentPropsWithRef<C>): ComponentAndProps<C> {
    return [Component, props];
}

Here's a usage example:

export const Container: React.FC = () => {
    // these could be any arbitrary wrapper components
    const wrappers: WrapperSet = [
        makeGroup(WrapperA, { label: "WrapperA" }),
        makeGroup(WrapperB, { title: "foo" }),
        makeGroup(WrapperB, {}),  // Error: missing 'title' property
    ];
  
    const content = <span>Original content</span>;
  
    return wrap(content, wrappers);
};

The trick is the makeGroup() helper function that allows TypeScript to infer and enforce the props type for the component.

If you just use the tuple notation then the props end up as any and TypeScript can't enforce the props:

    const wrappers2: WrapperSet = [
        [WrapperA, { label: "WrapperA" }],
        [WrapperB, {}]  // BAD - no error, TypeScript can't infer the props type for the component here
    ];

Final note - React has a number of utility types for extracting the props type from a component.

I chose ComponentPropsWithRef just in case you have a component that uses refs, but adjust as necessary:

React.ComponentProps<Component>
React.ComponentPropsWithRef<Component>
React.ComponentPropsWithoutRef<Component>

You can use children in Props to render your wrapped components with your Wrapper component

type Props = {
  children: React.ReactNode 
  newValue: any;
}
export const Wrapper = ({ children, newValue, ...otherProps }: Props) => {
  return React.cloneElement(children, {...otherProps, key3: newValue})
}

Usage

<Wrapper newValue="value3">
  <FirstComponent key1="value1" key2="value2" />
</Wrapper>

Another way, you can have a higher-order component (HOC) to modify your props before your wrapped components get rendered

const withModifiedProps = (WrappedComponent: React.ReactNode) => {
   const Wrapper = ({ newValue, ...props }) => {
      return <WrappedComponent {...props} key3={newValue} />
   }
   return Wrapper
}

After that, you can wrap your component with HOC

export default withModifiedProps(FirstComponent)

Whenever you render FirstComponent, you can pass newValue to it that will automatically populate key3 as the replacement for newValue

<FirstComponent key1="value1" key2="value2" newValue="value3" />

I believe You are asking about React.ButtonHTMLAttributes<HTMLButtonElement>.

import React from 'react'
import styled from 'styled-components'

const Button = styled.button<ButtonProps>`
  background-color: ${(props) => props.color};
`;


type ButtonProps = {
} & React.ButtonHTMLAttributes<HTMLButtonElement>;


const WrappedButton: React.FunctionComponent<ButtonProps> = ({ children, ...rest }) => (
    <div>
        <Button {...rest}>{children}</Button>
    </div>
);

If you want to use raw html <button>, you mignt be interested in: JSX.IntrinsicElements["button"];

Check this answer

UPDATE The quick and dirty solution would be :

type ButtonProps = {
} & React.ButtonHTMLAttributes<HTMLButtonElement> & { as?: string | React.ComponentType<any> };

But it is not generic.

There is StyledComponentPropsWithAs type in SC typings, but it is not exported (