Cannot access 'transactionId' before initialization - reactjs

Question

Why is transactionId not activating inside the useEffect hook?
It is an edit route through the context api. It strange because react-router-dom picks up the transactionId in the url.
edit transaction modal
let history = useHistory();
const { transaction, editTransaction } = useContext(GlobalContext);
const [selectedTransaction, setSelectedTransaction] = useState({
id: null,
category: "",
heading: "",
description: "",
subHeading: "",
author: "",
});
const transactionId = match.params.id;
useEffect(() => {
const transactionId = transactionId;
const selectedTransaction = transaction.find(
(t) => t.id === parseInt(transactionId)
);
setSelectedTransaction(selectedTransaction);
}, [transactionId, transaction]);
const [open, setOpen] = useState(true);
const cancelButtonRef = useRef(null);
const onSubmit = (e) => {
editTransaction(selectedTransaction);
history.push("/");
};
const handleOnChange = (transactionKey, val) =>
setSelectedTransaction({
...selectedTransaction,
[transactionKey]: val,
});
let formData = {
name: setSelectedTransaction.name,
amount: setSelectedTransaction.amount,
category: setSelectedTransaction.category,
};
global state
import React, { createContext, useReducer, useEffect } from "react";
import AppReducer from "./AppReducer";
//Initial State
const initialState = {
transactions: [
{
id: "1",
name: "Rent",
href: "#",
category: "expense",
amount: 1000,
currency: "USD",
status: "processing",
date: "July 1, 2020",
datetime: "2020-07-11",
type: "Bills",
},
{
id: "2",
name: "IRS",
href: "#",
category: "income",
amount: 5000,
currency: "USD",
status: "success",
date: "July 18, 2020",
datetime: "2020-07-18",
type: "Extra Income",
},
{
id: "3",
name: "Paypal",
href: "#",
category: "income",
amount: 15000,
currency: "USD",
status: "success",
date: "July 18, 2020",
datetime: "2020-07-18",
type: "Income",
},
{
id: "4",
name: "AT&T",
href: "#",
category: "expense",
amount: 2000,
currency: "USD",
status: "success",
date: "July 11, 2020",
datetime: "2020-07-11",
type: "Phone",
},
],
totalTransactionCount: 4,
};
//Create context
export const GlobalContext = createContext(initialState);
//Provider component
export const GlobalProvider = ({ children }) => {
const [state, dispatch] = useReducer(AppReducer, initialState);
const { totalTransactionCount, transactions } = state;
//Actions
function deleteTransaction(id) {
dispatch({
type: "DELETE_TRANSACTION",
payload: id,
});
}
function addTransaction(transaction) {
dispatch({
type: "ADD_TRANSACTION",
payload: transaction,
});
}
const editTransaction = (transaction) => {
dispatch({
type: "EDIT_TRANSACTION",
payload: transaction,
});
};
useEffect(() => {
dispatch({
type: "SET_TRANSACTION_COUNT",
payload: transactions.length,
});
}, [transactions]);
return (
<GlobalContext.Provider
value={{
transactions: state.transactions,
totalTransactionCount,
deleteTransaction,
addTransaction,
editTransaction,
}}>
{children}
</GlobalContext.Provider>
);
};
reducer
export default (state, action) => {
switch (action.type) {
case "DELETE_TRANSACTION":
return {
...state,
transactions: state.transactions.filter(
(transaction) => transaction.id !== action.payload
),
};
case "EDIT_TRANSACTION":
const updatedTransaction = action.payload;
const updatedTransactions = state.transactions.map((transaction) => {
if (transaction.id === updatedTransaction.id) {
return updatedTransaction;
}
return transaction;
});
return {
...state,
transactions: updatedTransactions,
};
case "ADD_TRANSACTION":
return {
...state,
transactions: [action.payload, ...state.transactions],
};
case "SET_TRANSACTION_COUNT":
return {
...state,
totalTransactionCount: action.payload,
};
default:
return state;
}
};