We have 7 different TypeScript utility types, like Pick Omit Partial NonNullable React.ComponentProps React.MouseEventHandler and special one React.PropsWithChildren

React's utility type PropsWithChildren enables components to take both props and child elements as input.

It is used in the definition of the component to identify the types of properties it can receive, including the children prop, which contains any elements contained within the component's JSX. In addition to children, it allows for the use of various props.

UseCase Example

const Track = ({ children }:PropsWithChildren) => {
  return (
    <div className="flex justify-center no-wrap -ml-30 space-x-60 for-debugging-track">
      {children}
    </div>
  );
};

Additional Resources: https://www.chakshunyu.com/blog/7-typescript-utility-types-for-react-developers/