Cannot read properties of undefined (reading 'price')

I am trying to perform the buy function to purchase nft but it says the price is undefined.

async function loadNFTs() {
  const provider = new ethers.providers.JsonRpcProvider('https://rpc-mumbai.maticvigil.com')
  const tokenContract = new ethers.Contract(nftAddress, NFT.abi, provider)
  const marketContract = new ethers.Contract(marketAddress, Marketplace.abi, provider)
  const data = await marketContract.fetchMarketItems()

  const items = await Promise.all(data.map(async i => {
    const tokenUri = await tokenContract.tokenURI(i.tokenId);
    const meta = await axios.get(tokenUri);
    let price = web3.utils.fromWei(i.price.toString(), 'ether');
    let item = {
      price,
      tokenId: i.tokenId.toNumber(),
      seller: i.seller,
      owner: i.owner,
      image: meta.data.image,
      name: meta.data.name,
      description: meta.data.description,
      address: meta.data.address
    }
    return item
  }))
  console.log('items: ', items)
  setNfts(items);
  setLoadingState(false);
}

async function buyNft({nft}) {
  const web3Modal = new Web3Modal({
    network: "mainnet",
    cacheProvider: true,
  });
  const connection = await web3Modal.connect();
  const provider = new ethers.providers.Web3Provider(connection);
  const signer = provider.getSigner();
  const contract = new ethers.Contract(marketAddress, Marketplace.abi, signer);

  nft = nfts.price
  console.log('nft', nft)
  const price = web3.utils.toWei(nft.price.toString(), 'ether');
  console.log('------',price);

  const transaction = await contract.createMarketSale(nftAddress, nft.tokenId, {
    value: price
  });
  await transaction.wait();
  loadNFTs();
}

I am successfully able to fetch nfts:

When performing buyNft there is an error saying: