react contextAPIを使っているアプリで localStorageからデータを取得する方法

前提・実現したいこと

youtubeを見ながらお金管理アプリをreact,reactのcontextAPIを用いて作成しました。
使ったお金の、タイトル・金額を入力していくアプリです。

現在はサイトをリロードすると入力したタイトル・金額が消えてしまうためlocalStorageで管理しようとしています。

localStorageにデータを入れることはできているのですが、データをlocalStorageから取得して
表示できるようにする部分に苦戦しています。

こちらのyoutubeを見ながら作成しました
https://www.youtube.com/watch?v=XuFDcZABiDQ&list=PLillGF-RfqbY3c2r0htQyVbDJJoBFE6Rb

作成者の方のgithubから元コードをcloneすることができます。
https://github.com/bradtraversy/expense-tracker-react

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

*showdata のところでlocalStorageにあるデータを取得して画面上の表示し、リフレッシュを行っても消えないようにしたいです。

TransactionList
1import React, { useContext, useEffect } from "react";
2import { GlobalContext } from "../context/GlobalState";
3
4import { Transaction } from "./Transaction";
5
6// 取引履歴
7export const TransactionList = () => {
8  const { transactions } = useContext(GlobalContext);
9
10  // save data to localStorage
11  useEffect(() => {
12    localStorage.setItem("transactions", JSON.stringify(transactions));
13  });
14
15  // ※show data
16  useEffect(() => {
17    const trans =
18      JSON.parse(localStorage.getItem("transactions")) &&
19      this.setState({
20        transactions: JSON.parse(localStorage.getItem("transactions")),
21      });
22    console.log("trans", trans);
23  });
24
25  console.log("transactions", transactions);
26  return (
27    <div>
28      <h3>History</h3>
29      <ul id="list" className="list">
30        {transactions.map((transacrion) => (
31          <Transaction key={transacrion.id} transacrion={transacrion} />
32        ))}
33      </ul>
34    </div>
35  );
36};
37
38export default TransactionList;
39

GlobalStateで上記のTransaction.jsにデータを渡しています。

GlobalState
1import React, { createContext, useReducer } from "react";
2import AppReducer from "./AppReducer";
3
4// initial State
5const initialState = {
6  transactions: [],
7};
8
9// create context
10export const GlobalContext = createContext(initialState);
11
12// Provider component
13export const GlobalProvider = ({ children }) => {
14  const [state, dispatch] = useReducer(AppReducer, initialState);
15
16  // action
17  function deleteTransaction(id) {
18    dispatch({
19      type: "DELETE_TRANSACTION",
20      payload: id,
21    });
22  }
23
24  function addTransaction(transaction) {
25    dispatch({
26      type: "ADD_TRANSATION",
27      payload: transaction,
28    });
29  }
30
31  return (
32    <GlobalContext.Provider
33      value={{
34        transactions: state.transactions,
35        deleteTransaction,
36        addTransaction,
37      }}
38    >
39      {children}
40    </GlobalContext.Provider>
41  );
42};
43

TransactionListからpropsを渡され、表示をしています。

Transaction
1import React, { useContext, useEffect } from "react";
2import { GlobalContext } from "../context/GlobalState";
3
4export const Transaction = ({ transacrion }) => {
5  const { deleteTransaction } = useContext(GlobalContext);
6
7  const sign = transacrion.amount < 0 ? "-" : "+";
8  return (
9    <div>
10      <li className={transacrion.amount < 0 ? "minus" : "plus"}>
11        {transacrion.text}{" "}
12        <span>
13          {sign}${Math.abs(transacrion.amount)}
14        </span>
15        <button
16          className="delete-btn"
17          onClick={() => deleteTransaction(transacrion.id)}
18        >
19          x
20        </button>
21      </li>
22    </div>
23  );
24};
25

試したこと

https://dev.to/saranshk/react-hooks-and-local-storage-let-s-build-a-todo-app-39g3
この記事を参考にしたのですが、ここではuseStateを利用しています。
私の場合は、globalな別ファイルにあるstateをアップデートする必要があり、その方法がわかりません。