fix

components/WatchlistTable/WatchListTableItem.tsx

-import React from 'react';
+import React, { useCallback } from 'react';
 
 import {
   Tag,
@@ -17,11 +17,19 @@ import WatchListAddressItem from './WatchListAddressItem';
 
 interface Props {
   item: TWatchlistItem;
-  onEditClick: () => void;
-  onDeleteClick: () => void;
+  onEditClick: (data: TWatchlistItem) => void;
+  onDeleteClick: (data: TWatchlistItem) => void;
 }
 
 const WatchlistTableItem = ({ item, onEditClick, onDeleteClick }: Props) => {
+  const onItemEditClick = useCallback(() => {
+    return onEditClick(item);
+  }, [ item, onEditClick ]);
+
+  const onItemDeleteClick = useCallback(() => {
+    return onDeleteClick(item);
+  }, [ item, onDeleteClick ]);
+
   return (
     <Tr alignItems="top" key={ item.address }>
       <Td><WatchListAddressItem item={ item }/></Td>
@@ -29,8 +37,8 @@ const WatchlistTableItem = ({ item, onEditClick, onDeleteClick }: Props) => {
       <Td><Switch colorScheme="green" size="md" isChecked={ item.notification }/></Td>
       <Td>
         <HStack spacing="30px">
-          <Icon as={ FaEdit } w="20px" h="20px" cursor="pointer" color="blue.500" onClick={ onEditClick }/>
-          <Icon as={ FaTrash } w="20px" h="20px" cursor="pointer" color="red.200" onClick={ onDeleteClick }/>
+          <Icon as={ FaEdit } w="20px" h="20px" cursor="pointer" color="blue.500" onClick={ onItemEditClick }/>
+          <Icon as={ FaTrash } w="20px" h="20px" cursor="pointer" color="red.200" onClick={ onItemDeleteClick }/>
         </HStack>
       </Td>
     </Tr>

components/WatchlistTable/WatchlistTable.tsx

@@ -9,14 +9,14 @@ import {
   TableContainer,
 } from '@chakra-ui/react'
 
-import type { TWatchlist } from '../../data/watchlist';
+import type { TWatchlist, TWatchlistItem } from '../../data/watchlist';
 
 import WatchlistTableItem from './WatchListTableItem';
 
 interface Props {
   data: TWatchlist;
-  onEditClick: (index: number) => () => void;
-  onDeleteClick: (index: number) => () => void;
+  onEditClick: (data: TWatchlistItem) => void;
+  onDeleteClick: (data: TWatchlistItem) => void;
 }
 
 const WatchlistTable = ({ data, onDeleteClick, onEditClick }: Props) => {
@@ -32,12 +32,12 @@ const WatchlistTable = ({ data, onDeleteClick, onEditClick }: Props) => {
           </Tr>
         </Thead>
         <Tbody>
-          { data.map((item, index) => (
+          { data.map((item) => (
             <WatchlistTableItem
               item={ item }
               key={ item.address }
-              onDeleteClick={ onDeleteClick(index) }
-              onEditClick={ onEditClick(index) }
+              onDeleteClick={ onDeleteClick }
+              onEditClick={ onEditClick }
             />
           )) }
         </Tbody>

pages/watchlist.tsx

@@ -19,8 +19,8 @@ const WatchList: NextPage = () => {
   const [ addressModalData, setAddressModalData ] = useState<TWatchlistItem>();
   const [ deleteModalData, setDeleteModalData ] = useState<string>();
 
-  const onEditClick = useCallback((index: number) => () => {
-    setAddressModalData(watchlist[index]);
+  const onEditClick = useCallback((data: TWatchlistItem) => {
+    setAddressModalData(data);
     addressModalProps.onOpen();
   }, [ addressModalProps ])
 
@@ -29,8 +29,8 @@ const WatchList: NextPage = () => {
     addressModalProps.onClose();
   }, [ addressModalProps ]);
 
-  const onDeleteClick = useCallback((index: number) => () => {
-    setDeleteModalData(watchlist[index]?.address);
+  const onDeleteClick = useCallback((data: TWatchlistItem) => {
+    setDeleteModalData(data.address);
     deleteModalProps.onOpen();
   }, [ deleteModalProps ])