Refactor components to remove forwardRef and simplify props handling

- Updated multiple components to remove the use of forwardRef, simplifying the props structure.
- Adjusted imports and component definitions accordingly.
- Ensured consistent handling of refs and props across various viewer components.
- Improved readability and maintainability of the codebase.

src/components/setting/mods/network-interface-viewer.tsx

@@ -1,15 +1,15 @@
 import { ContentCopyRounded } from "@mui/icons-material";
 import { alpha, Box, Button, IconButton } from "@mui/material";
 import { writeText } from "@tauri-apps/plugin-clipboard-manager";
-import { forwardRef, useImperativeHandle, useState } from "react";
+import { useImperativeHandle, useState } from "react";
 import { useTranslation } from "react-i18next";
 import useSWR from "swr";
 
-import { BaseDialog, DialogRef } from "@/components/base";
+import { BaseDialog } from "@/components/base";
 import { getNetworkInterfacesInfo } from "@/services/cmds";
 import { showNotice } from "@/services/noticeService";
 
-export const NetworkInterfaceViewer = forwardRef<DialogRef>((props, ref) => {
+export const NetworkInterfaceViewer = ({ ref, ...props }) => {
   const { t } = useTranslation();
   const [open, setOpen] = useState(false);
   const [isV4, setIsV4] = useState(true);
@@ -99,7 +99,7 @@ export const NetworkInterfaceViewer = forwardRef<DialogRef>((props, ref) => {
       ))}
     </BaseDialog>
   );
-});
+};
 
 const AddressDisplay = (props: { label: string; content: string }) => {
   const { t } = useTranslation();