Fix rending more hooks

src/panelWebView/components/FileItem.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { MessageHelper } from '../../helpers/MessageHelper';
+import { CommandToCode } from '../CommandToCode';
+import { FileIcon } from './Icons/FileIcon';
+import { MarkdownIcon } from './Icons/MarkdownIcon';
+
+export interface IFileItemProps {
+  name: string;
+  path: string;
+}
+
+export const FileItem: React.FunctionComponent<IFileItemProps> = ({ name, path }: React.PropsWithChildren<IFileItemProps>) => {
+  
+  const openFile = () => {
+    MessageHelper.sendMessage(CommandToCode.openInEditor, path);
+  };
+
+  return (
+    <li className={`file_list__items__item`}
+        onClick={openFile}>
+      {
+        (name.endsWith('.md') || name.endsWith('.mdx')) ? (
+          <MarkdownIcon />
+        ) : (
+          <FileIcon />
+        )
+      }
+
+      <span>{name}</span>
+    </li>
+  );
+};

src/panelWebView/components/FileList.tsx

@@ -1,9 +1,6 @@
 import * as React from 'react';
 import { FileInfo } from '../../models';
-import { CommandToCode } from '../CommandToCode';
-import { MessageHelper } from '../../helpers/MessageHelper';
-import { FileIcon } from './Icons/FileIcon';
-import { MarkdownIcon } from './Icons/MarkdownIcon';
+import { FileItem } from './FileItem';
 import { VsLabel } from './VscodeComponents';
 
 export interface IFileListProps {
@@ -13,10 +10,6 @@ export interface IFileListProps {
 }
 
 export const FileList: React.FunctionComponent<IFileListProps> = ({files, folderName, totalFiles}: React.PropsWithChildren<IFileListProps>) => {
-  
-  const openFile = (filePath: string) => {
-    MessageHelper.sendMessage(CommandToCode.openInEditor, filePath);
-  };
 
   if (!files || files.length === 0) {
     return null;
@@ -29,19 +22,7 @@ export const FileList: React.FunctionComponent<IFileListProps> = ({files, folder
       <ul className="file_list__items">
         {
           files.map(file => (
-            <li key={file.fileName}
-                className={`file_list__items__item`}
-                onClick={() => openFile(file.filePath)}>
-              {
-                (file.fileName.endsWith('.md') || file.fileName.endsWith('.mdx')) ? (
-                  <MarkdownIcon />
-                ) : (
-                  <FileIcon />
-                )
-              }
-
-              <span>{file.fileName}</span>
-            </li>
+            <FileItem key={file.fileName} name={file.fileName} path={file.filePath} />
           ))
         }
       </ul>