I have the following component in React (React 17.0.1)

import { ResizableBox } from 'react-resizable';

interface ResizableProps {
  direction: 'horizontal' | 'vertical';
  children: React.ReactNode;
}

const Resizable: React.FC<ResizableProps> = ({ direction, children }) => {
  return (
    <ResizableBox height={300} width={300} resizeHandles={['s']}>
      {children}
    </ResizableBox>
  );
};

export default Resizable;

and get the following error:

ERROR in src/components/resizable.tsx:10:4
TS2769: No overload matches this call.
Overload 1 of 2, ‘(props: ResizableProps): ResizableBox’, gave the following error.
Type ‘{ children: ReactNode; height: number; width: number; resizeHandles: “s”[]; }’ is not assignable to type ‘IntrinsicAttributes & IntrinsicClassAttributes & Readonly’.
Property ‘children’ does not exist on type ‘IntrinsicAttributes & IntrinsicClassAttributes & Readonly’.
Overload 2 of 2, ‘(props: ResizableProps, context: any): ResizableBox’, gave the following error.
Type ‘{ children: ReactNode; height: number; width: number; resizeHandles: “s”[]; }’ is not assignable to type ‘IntrinsicAttributes & IntrinsicClassAttributes & Readonly’.
Property ‘children’ does not exist on type ‘IntrinsicAttributes & IntrinsicClassAttributes & Readonly’.
8 | const Resizable: React.FC = ({ direction, children }) => {
9 | return (

10 | <ResizableBox height={300} width={300} resizeHandles={[‘s’]}>
| ^^^^^^^^^^^^
11 | {children}
12 |
13 | );

I’m trying to get use of the Resizable box component