Data is not showing in Grid Lookup React.js MaterialUI - reactjs

Question

I need to show my lookup like this
Lookup image what I want
So the code for this lookup is which is shown is hardcoded but i want to do retrieve data dynamically.
Hardcoded data
I had done with to retrieve data from database and the data is also in same format when i console log the both they are same.
AvaibleMechanic is which we retrieve from DB and dyanmicMechanicLookUp is harcoded
Both data console log SS
setColumnsCode
const [columns, setColumns] = useState([
{ title: "OrderId", field: "_id", editable: "never" },
{ title: "Customer Name", field: "customerName", editable: "never" },
{ title: "Car Name", field: "carName", editable: "never" },
{ title: "Car Number", field: "carNumber", editable: "never" },
{ title: "Address", field: "custAddress", editable: "never" },
{ title: "Service Name", field: "serviceName", editable: "never" },
{ title: "Price", field: "servicePrice", editable: "never" },
{
title: "Assign Mechanic",
field: "mechanicId",
lookup: AvailableMechanic,
},
]);
when i want to see data which is retrieve from Database is not show on the lookup is look like this
Retrieve from database lookup SS
You can see when I used dynamicLookUp which is hardcoded it works fine but when i used data which is retrieve it's not shown on the grid
FullCode
import React, { useState, useEffect } from "react";
import AdminOrders from "../../../services/member/orders.js/admin_orders";
import MechanicService from "../../../services/member/Mechanic/Mechanic_Services";
import "./CSS/Cars.css";
import MaterialTable from "material-table";
import { useSnackbar } from "notistack";
function Orders() {
const [orders, setOrders] = useState([]);
const [completedOrders, setCompletedOrders] = useState([]);
const [AvailableMechanic, setAvailableMechanic] = useState({});
const { enqueueSnackbar, closeSnackbar } = useSnackbar();
//for error handling
const [iserror, setIserror] = useState(false);
const [errorMessages, setErrorMessages] = useState([]);
const getAvailableMechanics = async () => {
await MechanicService.findAvailable()
.then((res) => {
res.map((key,i) => {
setAvailableMechanic(prevState => ({
...prevState,
[key._id]: key.name
}))
})
})
.catch((err) => {
console.log(err)
})
}
const getPlacedOrders = () => {
AdminOrders.findPlacedOrders()
.then((response) => {
setOrders(response);
})
.catch((err) => {
console.log(err);
});
};
const getCompletedOrders = () => {
AdminOrders.findCompletedOrders()
.then((res) => {
setCompletedOrders(res);
})
.catch((err) => {
console.log(err);
});
};
useEffect(() => {
getAvailableMechanics();
getPlacedOrders();
getCompletedOrders();
}, []);
const dynamicMechanicsLookUp = {
'621d06355e364ae391f59af4': "John Doe 1",
'621e3fb9d99ae5efd754b5d6': "John Doe 2",
'62766409db9ad573da5655cc': "John Doe 3",
'6276642cdb9ad573da5655d1': "John Doe 4",
'62766433db9ad573da5655d4': "John Doe 5",
};
// const dynamicMechanicsLookUp = AvailableMechanic;
console.log("dynamicLookUp",dynamicMechanicsLookUp)
console.log("AvailableMechanic",AvailableMechanic)
const [columns, setColumns] = useState([
{ title: "OrderId", field: "_id", editable: "never" },
{ title: "Customer Name", field: "customerName", editable: "never" },
{ title: "Car Name", field: "carName", editable: "never" },
{ title: "Car Number", field: "carNumber", editable: "never" },
{ title: "Address", field: "custAddress", editable: "never" },
{ title: "Service Name", field: "serviceName", editable: "never" },
{ title: "Price", field: "servicePrice", editable: "never" },
{
title: "Assign Mechanic",
field: "mechanicId",
lookup: AvailableMechanic,
},
]);
const [column, setColumn] = useState([
{ title: "OrderId", field: "_id" },
{ title: "Customer Name", field: "customerName" },
{ title: "Car Name", field: "carName" },
{ title: "Car Number", field: "carNumber" },
{ title: "Address", field: "custAddress" },
{ title: "Service Name", field: "serviceName" },
{ title: "Price", field: "servicePrice" },
{ title: "Assigned Mechanic", field: "mechanicId" },
]);
const handleRowUpdate = (newData, oldData, resolve) => {
let errorList = [];
if (errorList.length < 1) {
AdminOrders.assignOrder(newData._id, newData.mechanicId)
.then((res) => {
const dataUpdate = [...orders];
const index = oldData.tableData.id;
dataUpdate[index] = newData;
setOrders([...dataUpdate]);
resolve();
setIserror(false);
setErrorMessages([]);
enqueueSnackbar(res, {
variant: "success",
});
})
.catch((error) => {
setErrorMessages(["Update failed! Server error"]);
setIserror(true);
resolve();
});
} else {
setErrorMessages(errorList);
setIserror(true);
resolve();
}
};
const [display, setdisplay] = useState(false);
const openTable = () => {
setdisplay(true);
};
const closeTable = () => {
setdisplay(false);
};
return (
<div className="cars_container">
<br />
<button onClick={openTable}>See Completed Orders</button>
<br />
{orders ? (
<MaterialTable
title="CURRENT ORDERS DATA"
columns={columns}
data={orders}
editable={{
onRowUpdate: (newData, oldData) =>
new Promise((resolve, reject) => {
handleRowUpdate(newData, oldData, resolve);
}),
}}
options={{
headerStyle: {
backgroundColor: "#01579b",
color: "#FFF",
},
exportButton: true,
}}
/>
) : (
<div>
<br />
<h2>NO CURRENT ORDERS RIGHT NOW</h2>
</div>
)}
<br />
<br />
<br />
{display ? (
<div>
<h1>COMPLETED ORDERS</h1>
<MaterialTable
title="CURRENT ORDERS DATA"
columns={column}
data={completedOrders}
options={{
headerStyle: {
backgroundColor: "#01579b",
color: "#FFF",
},
exportButton: true,
}}
/>
<br />
<button onClick={closeTable}>Close Table</button>
<br />
<br />
<br />
</div>
) : null}
</div>
);
}
export default Orders;
Sorry for the bad english. Please if you find any mistake i am making please let me know
Thanks