I checked other questions with the error but no luck. I am creating an edit order screen. I get the order data from the state and assign to tableData. And when using tableData to add the content to a table I get the error "TypeError: Cannot read properties of undefined (reading 'map')"

const PurchaseOrderEditScreen = ({history}) => {
    const dispatch = useDispatch()

    const { id } = useParams()
    const orderId = id

    const orderDetails = useSelector( state => state.orderDetails )
    const { loading, error, order } = orderDetails

    const [tableData, setTableData] = useState([])

    useEffect(() => {

        if(!userInfo){
            history.push('/login')
        }

        if(!order || order._id !== orderId ){
                dispatch(getOrderDetails(orderId))
        }       
        
    },[dispatch, history, userInfo, orderId, order])

    return(
        <>
        {loading ? <Loader />
                    : error ? <Message variant='danger'>{error}</Message>
                    : (
            <div>
            <Table striped bordered hover responsive='md' className='table-sm mt-3' id="table-to-xls">
                        <thead>
                            <tr>
                                -----
                            </tr>
                        </thead>
                        <tbody>
                            {tableData.orderItems.map(item => (
                                    <tr key={item._id} >
                                        ------
                                    </tr>
                                ))}
                        </tbody>                        
            </Table>
            

If I try to add content to table from order like order.orderItems.map(item it works but it does not with tableData.orderItems.map. I could see in console.log of tableData at first render as empty.

While I am writing code with order.orderItems.map it works, then when I change to tableData.orderItems.map it works fine without any error. I could see when auto render happen after code change the tableData in console.log has data. But at the same time when refresh the page it throws the error.

I added the below code as well but still the same issue.

useEffect(()=>{
           setTableData(order)
        },[order])

Can anyone please help on this and let me know why at the initial console.log tableData shows empty. Please let me know if you need further details