My code should break up the list into sectioned off groups that display the name of an expense and its cost. However it is instead showing everything in one list and inserting expenseName list items next to each other. I'm not sure how I can make it breakup as I have changed the keys to insure that they are unique.

```
    //import statements
import "./App.css";
import {useState} from "react";
//declare default function
export default function App(){
  //expenseName variables
  const [expenseName, setExpenseName] = useState("");
  const [expenseNames, setExpenseNames] = useState([]);
//expenseCost variables
  const [expenseCost, setExpenseCost] = useState(0);
  const [expenseCosts, setExpenseCosts] = useState([]);

//handle form submission
  function handleFormSubmit(e){
    //prevent page from reloading
    e.preventDefault();
    //add an item to expenseNames
    setExpenseNames([...expenseNames,{
      id: expenseNames.length + 1 + "N",
      text: expenseName.trim()
    }])
    //add an item to expenseCost
    setExpenseCosts([...expenseCosts,{
      id: expenseCosts.length + 1 + "G",
      value: expenseCost
    }])
  }
  //handles input
  function handleInputChangeName(e){
    setExpenseName(e.target.value);

  }
  //handles input
  function handleInputChangeCost(e){
    setExpenseCost(e.target.value);
  }
  //returns app display
  return(
    /*div expenseList needs to display the list items in one group, 
    however is displaying them in seprate groups and putting names and costs together instead of with corrisponding item. */
    <div className="App">
      <div id="title">
        <h1>Expense tracker</h1>
      </div>
      <div id="createExpense">
        <form onSubmit={handleFormSubmit}>
          <input required="required" placeholder="Enter expense name..." type="text" name="expenseName" value={expenseName} onChange={handleInputChangeName}></input>
          <input required="required" placeholder="Enter expense cost..." type="number" name="expenseCost" value={expenseCost} onChange={handleInputChangeCost}></input>
          <button>Save</button>
        </form>

      </div>
      <div id="expenseList">

        <ul>

          {expenseNames.map((expenseName) =><li key={expenseName.id}>{expenseName.text}</li>)}
          {expenseCosts.map((expenseCost) => <li key={expenseCost.id}>{expenseCost.value}</li>)}
        </ul>

      </div>
    </div>
  )
}

```