React: How to alert a list, based off the value of inputs

I am making a React app that tracks your expenses. Right now in the ExpenseInput component I want to be able to extract the values of the inputs and alert the values that were entered. Later on I will want to render a list of expenses similar to a ToDo App. I have some stuff setup already. I know that the expense state variable should store all you expenses and all the other state variables are set to its respective inputs. I just am not sure what the next step should be.

import React, { useState } from "react";
export default function ExpenseInputs() {
  const [expense, setExpense] = useState([]);
  const [expenseName, setExpenseName] = useState("");
  const [expenseAmt, setExpenseAmt] = useState();
  const [expenseType, setExpenseType] = useState("");
  const expenseTypes = ["Food", "Gas", "Entertainment", "Rent"];

  const updateExpenseName = e => {
    e.preventDefault();
    setExpenseName(e.target.value);
    console.log(e.target.value);
  };
  const updateExpenseAmt = e => {
    e.preventDefault();
    setExpenseAmt(e.target.value);
  };

  const addExpenses = () => {
    
  };

  return (
    <>
      <div className="field">
        <label className="label">Expense</label>
        <input
          value={expenseName}
          onChange={updateExpenseName}
          className="expense-input"
          type="text"
          placeholder="Expense"
        />
      </div>
      <div className="field">
        <label className="label">Amount</label>
        <input
          value={expenseAmt}
          onChange={updateExpenseAmt}
          className="expense-amount"
          type="text"
          placeholder="Expense amount"
        />
      </div>
      <div className="field">
        <label className="label">Expense Type</label>
        <select>
          {expenseTypes.map(e => {
            return <option>{e}</option>;
          })}
        </select>
      </div>
      <div className="field">
        <button onClick={addExpenses} className="button">
          Add
        </button>
      </div>
    </>
  );
}

Maybe use setExpense inside your addExpense method. You can use the expense array inside the setExpense call.

Something like setExpense([...expense, newExpense]) should work.

After this, you can call an alert in your expense array and you should see it updated with your new expense. Than, it shouldn’t be hard for you to build a view of your expenses right in this component.