fix: react SFC & children

ui/src/common/Container.tsx

@@ -12,7 +12,7 @@ interface IProps {
     style?: React.CSSProperties;
 }
 
-const Container: React.FC<IProps> = ({children, style, ...props}) => {
+const Container: React.FC<React.PropsWithChildren<IProps>> = ({children, style}) => {
     const {classes} = useStyles();
     return (
         <Paper elevation={6} className={classes.paper} style={style}>

ui/src/common/DefaultPage.tsx

@@ -8,7 +8,12 @@ interface IProps {
     maxWidth?: number;
 }
 
-const DefaultPage: FC<IProps> = ({title, rightControl, maxWidth = 700, children}) => (
+const DefaultPage: FC<React.PropsWithChildren<IProps>> = ({
+    title,
+    rightControl,
+    maxWidth = 700,
+    children,
+}) => (
     <main style={{margin: '0 auto', maxWidth}}>
         <Grid container spacing={4}>
             <Grid size={{xs: 12}} style={{display: 'flex', flexWrap: 'wrap'}}>

ui/src/plugin/PluginDetailView.tsx

@@ -95,7 +95,7 @@ interface IPanelWrapperProps {
     icon?: React.ComponentType;
 }
 
-const PanelWrapper: React.FC<IPanelWrapperProps> = ({
+const PanelWrapper: React.FC<React.PropsWithChildren<IPanelWrapperProps>> = ({
     name,
     description,
     refresh,

ui/src/plugin/Plugins.tsx

@@ -1,4 +1,4 @@
-import React, {SFC} from 'react';
+import React from 'react';
 import {Link} from 'react-router-dom';
 import Grid from '@mui/material/Grid';
 import Paper from '@mui/material/Paper';
@@ -62,7 +62,7 @@ interface IRowProps {
     fToggleStatus: VoidFunction;
 }
 
-const Row: SFC<IRowProps> = observer(({name, id, token, enabled, fToggleStatus}) => (
+const Row: React.FC<IRowProps> = observer(({name, id, token, enabled, fToggleStatus}) => (
     <TableRow>
         <TableCell>{id}</TableCell>
         <TableCell>