Fix tx fields not updating

components/Transaction.tsx

@@ -2,7 +2,7 @@ import { Play } from "phosphor-react";
 import { FC, useCallback, useEffect } from "react";
 import { useSnapshot } from "valtio";
 import transactionsData from "../content/transactions.json";
-import state from "../state";
+import state, { modifyTransaction } from "../state";
 import { sendTransaction } from "../state/actions";
 import Box from "./Box";
 import Button from "./Button";
@@ -35,9 +35,8 @@ export interface TransactionState {
 }
 
 export interface TransactionProps {
-  header?: string;
+  header: string;
   state: TransactionState;
-  setState: (p?: Partial<TransactionState>) => void;
 }
 
 const Transaction: FC<TransactionProps> = ({
@@ -50,11 +49,17 @@ const Transaction: FC<TransactionProps> = ({
     txIsDisabled,
     txIsLoading,
   },
-  setState,
   ...props
 }) => {
   const { accounts } = useSnapshot(state);
 
+  const setState = useCallback(
+    (pTx?: Partial<TransactionState>) => {
+      modifyTransaction(header, pTx);
+    },
+    [header]
+  );
+
   const transactionsOptions = transactionsData.map(tx => ({
     value: tx.TransactionType,
     label: tx.TransactionType,

pages/test/[[...slug]].tsx

@@ -21,6 +21,7 @@ const Accounts = dynamic(() => import("../../components/Accounts"), {
 const Test = () => {
   const { transactionLogs } = useSnapshot(state);
   const { transactions, activeHeader } = useSnapshot(transactionsState);
+
   return (
     <Container css={{ px: 0 }}>
       <Split
@@ -73,7 +74,6 @@ const Test = () => {
                     <Transaction
                       state={state}
                       header={header}
-                      setState={pTx => modifyTransaction(header, pTx)}
                     />
                   </Tab>
                 ))}