React Bootstrap Popover Placement/Not showing

New to React, and i am trying to use a popover to display a photo which I am retrieving from Firebase storage. I can get it to display but only on the top left hand corner. After some research - I discovered I wasn't passing in the props from the Trigger Overlay. Upon doing this the Image isn't showing at all now - despite the fact i can log out the props from my Popover Component.

          <td>
        <OverlayTrigger
          trigger="click"
          placement="right"
          overlay={<PopoverComponent url={update.photoURL}/>}
        >
          <Button variant="success">Click to see bandage</Button>
        </OverlayTrigger>
      </td>

Popover Component Code

const PopoverComponent = (props) => {

const [updateURL, setUpdateURL] = useState();
const {id, bandageID} = useParams();
storage.ref(`images/${id}/${bandageID}/updates/${props.url}`).getDownloadURL().then(url =>
        setUpdateURL(url))


        
return (
    <Popover {...props} id="popover-basic">
    <Popover.Title as="h3">Updated Bandage</Popover.Title>
        <Popover.Content>
        {console.log(props)}
            <Image src={updateURL} rounded/>
        </Popover.Content>
    </Popover>
);

}

export default PopoverComponent;

Not sure where I am going wrong, if someone could please help?

thanks