Can’t get other values to show using react

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' : .15  },
    { 'id': 2, 'plan' : 'Normal', 'cost' : .1  },
    { 'id': 3, 'plan' : 'Base', 'cost' : .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;```

[This is how the final product should look like in the end.)[1]
[1]: https://i.stack.imgur.com/mxBOK.png