Clickable areas in SVG image that will lead to another image src

Trying to create a point and click adventure game with SVG images and clickable path areas. For example, if you’re in a hall way, and you click on a door, the img src will change to the next room corresponding with that door. I’m able to use addEventListener “click” and alert when the specific area is clicked. I just can’t seem to get an idea on how to change the img src to the next room corresponding with that clicked area.

 //example img
<svg>
 <image xlink:href="/pointAndClickImg/Main Hall.svg"/>
 <path id="mainhall-left-door"/>
 <path id="mainhall-right-door/>
</svg>

 //example js that works with clicking and alerting
let mainHallLeftDoor = document.getElementById("leftdoor")
let mainHallRightDoor = document.getElementById("rightdoor")


mainHallLeftDoor.addEventListener("click", function() {
    alert("left door clicked")
    
})

mainHallRightDoor.addEventListener("click", function() {
    alert("right door clicked")
})