Сопоставить контекст в реакции

Я пытаюсь сопоставить свой контекст в React, но он ничего не отображает. (сообщений об ошибках тоже нет). Мое приложение обернуто поставщиком контекста.

Мой контекст

    import { createContext, useState } from "react";

export const ExpenseContext = createContext();

export const ExpenseProvider = ({ children }) => {
  const [expenseType, setExpenseType] = useState();
  const [description, setDescription] = useState();
  const [value, setValue] = useState();

  return (
    <ExpenseContext.Provider
      value={{
        expenseType,
        description,
        value,
        setExpenseType,
        setDescription,
        setValue,
      }}
    >
      {children}
    </ExpenseContext.Provider>
  );
};

Где я хочу визуализировать

    import React from "react";
import { useContext } from "react";

import { ExpenseItem } from "./ExpenseItem";
import { ExpenseContext } from "../ExpenseContext";

export const ExpenseList = () => {
  const context = useContext(ExpenseContext);
  return (
    <div>
      {Object.keys(context).map((key) => (
        <ExpenseItem
          expenseType={key.expenseType}
          description={key.description}
          value={key.value}
        ></ExpenseItem>
      ))}
    </div>
  );
};

 

Компонент моего элемента В моем компоненте элемента я просто отображаю {props.description} в качестве теста. Контекстные данные Мой контекст получает данные из такой формы:

    import React from "react";
import classes from "./Form.module.css";
import { IoIosAddCircleOutline } from "react-icons/io";
import { useContext, useState } from "react";
import { ExpenseContext } from "../ExpenseContext";

export const Form = () => {
  const [errorDesc, setErrorDesc] = useState(false);
  const [errorSelect, setErrorSelect] = useState(false);
  const [errorVal, setErrorVal] = useState(false);

  const context = useContext(ExpenseContext);

  const onSubmit = (e) => {
    e.preventDefault();

    if (!context.expenseType) {
      setErrorSelect(true);
    } else {
      setErrorSelect(false);
    }

    if (!context.description) {
      setErrorDesc(true);
    } else {
      setErrorDesc(false);
    }

    if (!context.value || isNaN(context.value)) {
      setErrorVal(true);
    } else {
      setErrorVal(false);
    }
  };

  return (
    <form className={classes.form} onSubmit={onSubmit}>
      <select
        className={classes.select}
        name="select"
        id=""
        onChange={(e) => context.setExpenseType(e.target.value)}
      >
        <option value="" disabled selected>
          Expense Type
        </option>
        <option value="Savings">Savings</option>
        <option value="Investments">Investments</option>
        <option value="Expenses">Expenses</option>
      </select>
      <label htmlFor="select">
        {errorSelect ? "Please choose an expense type!" : ""}
      </label>

      <h2 className="">Tracking Expenses</h2>
      <hr />

      <div className={classes.wrapper}>
        <div className={classes.formGroup}>
          <input
            type="text"
            placeholder="Description"
            name="description"
            className={
              errorDesc ? classes.descriptionError : classes.description
            }
            onChange={(e) => context.setDescription(e.target.value)}
          />
          <label htmlFor="description">
            {errorDesc ? "Please add a description!" : ""}
          </label>
        </div>

        <div className={classes.formGroup}>
          <input
            type="text"
            placeholder="Amount"
            name="value"
            className={errorVal ? classes.valueError : classes.value}
            onChange={(e) => context.setValue(e.target.value)}
          />
          <label htmlFor="value">
            {errorVal ? "Please add a valid value!" : ""}
          </label>
        </div>

        <div className={classes.formGroup}>
          <input type="submit" className={classes.submit} />
        </div>
      </div>
    </form>
  );
};