React.js: Image from API call not rendering in browser

I'll explain this simply at first and then give more detailed examples of my code further to the end.

So, I'm making an API call in my parent component, as follows:

    componentDidMount() {
        const url = 'http://www.hashigozake.co.nz/taplist.xml'
        const proxyURL = 'https://cors-anywhere.herokuapp.com/'
      
        fetch(proxyURL + url)
        .then(res => res.text())
        .then(beerXML => {
          let beerJs = new XMLParser().parseFromString(beerXML)
          this.setState({
            beers: beerJs
          })
        })
      }

...the data from which is being passed as props to TileList.jsx :

<TileList beerList = {this.state.beers}/>

Within TileList.jsx, I'm mapping through the returned API data:

import React from 'react'
import Tile from './Tile'

const TileList = (props) => {
    props.beerList.children &&
    props.beerList.children.length && 
    console.log(props.beerList.children[0].children);
    return (
        <>
         <h1 className = 'h1-pouring'>Currently Pouring:</h1> 
        <div className = 'tile-container'>
            {
                props.beerList.children &&
                props.beerList.children.length &&
                props.beerList.children[0].children.map(product => {
                     return <Tile product = {product}/>

                })
            } 
        </div> 
        </>
    )
}

export default TileList

....and then passing that data as props to Tile.jsx

import React from 'react'

class Tile extends React.Component  {
    // console.log(`this is the product being passed to Tile: ${props.product.children[8].value}`)
    constructor() {
        super()
        
    }
    render() {
        return (
            <>
             {this.props.product.children[11].value === 'Now' ?
                <div className = 'tile'>
                <h1>{this.props.product.children[0].value}</h1>
                <h3>{this.props.product.children[10].value}</h3>
                <h3>{this.props.product.children[1].value} : {this.props.product.children[2].value}</h3> 
                <h3>ABV {this.props.product.children[3].value}</h3>
                <img src = {this.props.product.children[8].value}/>
                </div>
            :
            null
            }
            </>
            )
    }

}

export default Tile

So here's where the problem lies: <img src = {this.props.product.children[8].value}/> is not rendering an image in the browser (I'm getting the broken image icon). console.log(this.props.children[8].value) returns islandlife.png , which is the correct URL for the image. I also looked in the DOM, and the node for the image was <img src = "islandlife.png"> ==$0

If it's any help, here's the data from the API call that is passed as props :

children: Array(15)
0: {name: "Name", attributes: {…}, children: Array(0), value: "Island Life IPA", getElementsByTagName: ƒ}
1: {name: "Volume", attributes: {…}, children: Array(0), value: "300ml/473ml", getElementsByTagName: ƒ}
2: {name: "Price", attributes: {…}, children: Array(0), value: "$10/$13", getElementsByTagName: ƒ}
3: {name: "ABV", attributes: {…}, children: Array(0), value: "6.3%", getElementsByTagName: ƒ}
4: {name: "Handpump", attributes: {…}, children: Array(0), value: "No", getElementsByTagName: ƒ}
5: {name: "Brewery", attributes: {…}, children: Array(0), value: "Eddyline", getElementsByTagName: ƒ}
6: {name: "IBU", attributes: {…}, children: Array(0), value: "", getElementsByTagName: ƒ}
7: {name: "ABV", attributes: {…}, children: Array(0), value: "6.3%", getElementsByTagName: ƒ}
8: {name: "Image", attributes: {…}, children: Array(0), value: "islandlife.png", getElementsByTagName: ƒ}
9: {name: "Country", attributes: {…}, children: Array(0), value: "New Zealand", getElementsByTagName: ƒ}
10: {name: "Description", attributes: {…}, children: Array(0), value: "Fruited IPA", getElementsByTagName: ƒ}
11: {name: "Pouring", attributes: {…}, children: Array(0), value: "Now", getElementsByTagName: ƒ}
12: {name: "IBU", attributes: {…}, children: Array(0), value: "", getElementsByTagName: ƒ}
13: {name: "TapBadge", attributes: {…}, children: Array(0), value: "", getElementsByTagName: ƒ}
14: {name: "Comments", attributes: {…}, children: Array(0), value: "", getElementsByTagName: ƒ}

Any ideas on how I can render the image? Thanks.