Cannot access 'transactionId' before initialization

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;
  }
};