Chore: replace React.FC<Props> with simple function component (#54123)

docs/sources/developers/plugins/add-support-for-variables.md

@@ -31,11 +31,11 @@ For panels, the `replaceVariables` function is available in the PanelProps.
 Add `replaceVariables` to the argument list, and pass it a user-defined template string.
 
 ```ts
-export const SimplePanel: React.FC<Props> = ({ options, data, width, height, replaceVariables }) => {
+export function SimplePanel({ options, data, width, height, replaceVariables }: Props) {
   const query = replaceVariables('Now displaying $service');
 
   return <div>{query}</div>;
-};
+}
 ```
 
 ## Interpolate variables in data source plugins

docs/sources/developers/plugins/migration-guide.md

@@ -708,9 +708,9 @@ import { PanelProps } from '@grafana/data';
 
 interface Props extends PanelProps<SimpleOptions> {}
 
-export const MyPanel: React.FC<Props> = ({ options, data, width, height }) => {
+export function MyPanel({ options, data, width, height }: Props) {
   // ...
-};
+}
 ```
 
 #### Migrate a data source plugin

docs/sources/developers/plugins/working-with-data-frames.md

@@ -52,11 +52,11 @@ frame.name = 'http_requests_total';
 When you're building a panel plugin, the data frames returned by the data source are available from the `data` prop in your panel component.
 
 ```ts
-const SimplePanel: React.FC<Props> = ({ data }) => {
+function SimplePanel({ data: Props }) {
   const frame = data.series[0];
 
   // ...
-};
+}
 ```
 
 Before you start reading the data, think about what data you expect. For example, to visualize a time series we'd need at least one time field, and one number field.