Although this answer is correct, I want to note that you absolutely don't have to use this PropsWithChildren helper. (It is primarily useful for the codemod, not manual usage.)

Instead, I find it easier to define them manually.

Before

import * as React from 'react';

type Props = {};
const Component: React.FC<Props> = ({children}) => {...}

After

import * as React from 'react';

type Props = {
  children?: React.ReactNode
};
const Component: React.FC<Props> = ({children}) => {...}

That is all that's needed.

Or you can stop using React.FC altogether.

import * as React from 'react';

type Props = {
  children?: React.ReactNode
};

function Component({children}: Props): React.ReactNode {
  ...
}

In React, children is a regular prop and is not something special. So you need to define it just like you define all the other props. The previous typings that hid it were wrong.

How to resolve

No props

Before

import React from 'react';

const Component: React.FC = ({children}) => {...}

After

Create e.g. react.d.ts to define your helper type ¹

export type PropsWithChildrenOnly = PropsWithChildren<unknown>;
export type ReactFCWithChildren = React.FC<PropsWithChildrenOnly>;

import React from 'react';
import { PropsWithChildrenOnly, ReactFCWithChildren } from './react';

const Component: React.FC<PropsWithChildrenOnly> = ({children}) => {...}

or

const Component: ReactFCWithChildren = ({children}) => {...}

With props

Before

import React from 'react';

interface Props {
  ...
}
const Component: React.FC<Props> = ({children}) => {...}

After

import React, { PropsWithChildren } from 'react';

interface Props {
  ...
}
const Component: React.FC<PropsWithChildren<Props>> = ({children}) => {...}

or

interface Props extends PropsWithChildren<unknown> {
  ...
}

const Component: React.FC<Props> = ({children}) => {...}

^{1 _{While defining children manually seems easy, it's better to leverage types that are already prepared for you in @types package. When there are changes to the type in the future, it will automatically propagate from the lib everywhere in your code so you won't have to touch it yourself.}}

Suppress warnings for some reason

You can override react types by creating react.d.ts file with following definition which would revert the type to @types/react v17

import * as React from '@types/react';

declare module 'react' {
  interface FunctionComponent<P = {}> {
    (props: PropsWithChildren<P>, context?: any): ReactElement<any, any> | null;
  }
}

Why did FC signature change

children prop was removed from React.FunctionComponent (React.FC) so you have to declare it explicitly.

TS will tell you errors like

Type '{ children: ...; }' has no properties in common with type 'IntrinsicAttributes'."

You can read why here. TLDR it prevents bugs like

const ComponentWithNoChildren: React.FC = () => <>Hello</>;

...

<ComponentWithNoChildren>
   // passing children is wrong since component does not accept any
   <UnusedChildrenSinceComponentHasNoChildren /> 
</ComponentWithNoChildren>

Create you custom functional component type FC.

Lets name it FCC

// Put this in your global types.ts

import { FC, PropsWithChildren } from "react";

// Custom Type for a React functional component with props AND CHILDREN
export type FCC<P={}> = FC<PropsWithChildren<P>>

Whenever you want children property in you Component's props, use it like this:

// import FCC from types.ts
const MyComponent: FCC = ({children}) => {
  return (
    <>{children}</>
  )
}

OR

interface MyCompoProps{
  prop1: string
}

const MyComponent: FCC<MyCompoProps> = ({children, prop1}) => {
  return (
    <>{children}</>
  )
}

PS This answer might look similar to @Garvae's answer but his ReactFCC<P> type should be written like ReactFCC<P={}> to prevent this following error:

Generic type 'ReactFCC' requires 1 type argument(s)

This error occurs when you are passing no props to the Component. children prop should be an optional prop. So giving those props a default {} value (i.e P = {}) solves the issue.