Each child in a list should have a unique "key" prop - React (Inserting into Table)

Question

I'm running into this unique key prop error and I'm not sure where to put the key in this situation. I'm trying to follow a tutorial to learn more about this, but am unable to fix this issue and the columns aren't aligned properly, not sure if it has to do with this error

ProductPage:

const ProductPage = () => {
    const [productShow, setProduct] = useState([])

    useEffect(() => {
        const getproduct = async () => {
            const productsFromServer = await fetchProduct()
            setProduct(productsFromServer)
        }

        getproduct()
    }, [])

    const column = [
        { heading: 'ProductID', value: 'ProductID' },
        { heading: 'ProductName', value: 'ProductName' },
    ]

    // Get Products from Database
    const fetchProduct = async () => {
        const res = await fetch('http://localhost:5000/products')
        const data = await res.json()


        return data
    }


    return (
        <div>
            <ProductTable product={productShow} column={column} />
            </div>
        )

Table Page:

const ProductTable = ({product, column }) => {
    return (
        <table>
            <thead>
                <tr>
                    {column.map((item) => <TableHeadItem item={item} />)}
                </tr>
            </thead>
            <tbody>
                <tr>
                    {product.map((item) => <TableRow item={item} column={column}/>)}
                </tr>
            </tbody>
        </table>
        )
}


const TableHeadItem = ({ item }) => <th>{item.heading }</th>
const TableRow = ({ item, column }) => (
    <tr>
        {column.map((columnItem, index) => {
            return <td>{item[`${columnItem.value}`]}</td>
        })}

    </tr>

    )

export default ProductTable

I'm not sure how to fix this issue and also make sure the table is aligned to the columns properly. Here is image: