Can't get other values to show using react

Question

I can't figure out how to get more values to show in my table using REACT. The only thing that I am able to show is the cost. I can't show Manufacturer and Item. So When I choose Iphone12 - Manufacturer will be "Apple" and Item will be "iPhone 12" & Galaxy S21 will be "Android" and "Galaxy 21",from the data structure in index. This is my Index.js :

import React from "react";
import ReactDOM from "react-dom";
import "./Home.css";
import "bootstrap/dist/css/bootstrap.min.css";
import MTWork from "./MTWork";
let inventory = [
  { id: 0, manufact: "None", item: "None", descr: "None", avail: 0, price: 0 },
  {
    id: 100,
    manufact: "Samsung",
    item: "Galaxy S22",
    descr: "The Lastest Phone",
    avail: 22,
    price: 1399.99,
  },
  {
    id: 101,
    manufact: "Samsung",
    item: "Galaxy S21",
    descr: "Recently refurbished like new",
    avail: 5,
    price: 699.99,
  },
  {
    id: 102,
    manufact: "Samsung",
    item: "Galaxy S20",
    descr: "Great phone works well",
    avail: 3,
    price: 399.99,
  },
  {
    id: 103,
    manufact: "Apple",
    item: "iPhone 13",
    descr: "New and Shiny, Nothing better",
    avail: 13,
    price: 1299.99,
  },
  {
    id: 104,
    manufact: "Apple",
    item: "iPhone 12",
    descr: "Refurbished but perfect",
    avail: 13,
    price: 899.99,
  },
  {
    id: 105,
    manufact: "Apple",
    item: "iPhone 11",
    descr: "Works great!",
    avail: 12,
    price: 599.99,
  },
];
let warranty = [
  { id: 0, plan: "None", cost: 0 },
  { id: 1, plan: "Extended", cost: 0.15 },
  { id: 2, plan: "Normal", cost: 0.1 },
  { id: 3, plan: "Base", cost: 0.05 },
];
let title = "Teds Technology Treasures";
ReactDOM.render(
  <React.StrictMode>
    <MTWork title={title} phones={inventory} wrnty={warranty} />
  </React.StrictMode>,
  document.getElementById("root")
);

THIS IS MY MTWork.js

import { useState } from "react";

function MTWork(props) {
  const { phones, title, wrnty } = props;

  const [name, setName] = useState("Kels");
  const [itm, setAndroid] = useState();
  const [Atem, setApple] = useState();
  const [Warrant, setWarranty] = useState(0);
  const [total, setTotal] = useState(0);

  function updateName(n) {
    setName(n.target.value);
  }
  function updateAndroid(a) {
    setAndroid(a.target.value);
  }
  function updateApple(ap) {
    setApple(ap.target.value);
  }
  function updateWarranty(w) {
    setWarranty(w.target.value);
  }

  function doOrder() {
    let total = 0;
    let total2 = parseFloat(itm) + parseFloat(Atem);
    let wTotal = total2 * parseFloat(Warrant);
    total += total2 + wTotal;
    return setTotal(total);
  }

  return (
    <div>
      <div className="container-fluid">
        <div className="row">
          <div className="col">
            <h1>
              <span className="title">{title}</span>
            </h1>
          </div>
        </div>
        <div className="row">
          <div className="col-4">
            Name: <input type="text" value={name} onChange={updateName} />
            <br />
            Android Phone:
            <select onChange={updateAndroid} value={itm}>
              {phones.map((phn) => (
                <option key={phn.id} value={phn.price}>
                  {phn.item}
                </option>
              ))}
            </select>
            <br />
            Apple Phone:
            <select onChange={updateApple} value={Atem}>
              {phones.map((Apn) => (
                <option key={Apn.id} value={Apn.price}>
                  {Apn.item}
                </option>
              ))}
            </select>
            <br />
            Warranty:
            <select onChange={updateWarranty} value={Warrant}>
              {wrnty.map((wrn) => (
                <option key={wrn.id} value={wrn.cost}>
                  {wrn.plan}
                </option>
              ))}
            </select>
            <br />
            <button className="btn btn-dark" onClick={() => doOrder()}>
              Order
            </button>
            <h2 style={{ color: "blue" }}>Results For Name: {name}</h2>
            <table className="table">
              <tbody className="color">
                <tr>
                  <th>Manufacturer:</th>
                  <th>Item:</th>
                  <th>Cost:</th>
                </tr>
                <tr>
                  <td scope="row">{phones.maunfact}</td>
                  <td scope="row">{phones.price}</td>
                  <td scope="row">{itm}</td>
                </tr>
                <tr>
                  <td scope="row">{phones.manufact}</td>
                  <td scope="row">{phones.price}</td>
                  <td scope="row">{Atem}</td>
                </tr>
                <tr>
                  <td>Warranty</td>
                  <td scope="row">{props.plan}</td>
                  <td scope="row">{Warrant}%</td>
                </tr>
                <tr>
                  <td scope="row">Total </td>
                  <td scope="row"></td>
                  <td scope="row">{total} </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  );
}
export default MTWork;