updating a sprite source - animation

Question

so I have a constant with the following:
const ghostFall2 = {
flap : function (){
this.speed = -this.jump;
} ,
animation2: [
{sX:2141, sY:195}
],
animation: [
{sX:1941, sY:202},
{sX:1753, sY:202},
],
cW : 226,
cH : 180,
x : 624,
y : 245,
w: 185,
h : 194,
frame: 0,
speed : 0,
gravity : 0.25,
jump : 6,
draw: function() {
if(ghostFall.y == 245){
state.current = state.game
let ghostFall2 = this.animation[this.frame];
ctx.drawImage(sprite, ghostFall2.sX, ghostFall2.sY, this.w, this.h, this.x, this.y, this.w, this.h)
}},
update: function(){
if(state.current == state.game){
ghostFall.draw = function(){}
this.frame += frames% 5 == 0 ?1:0;
this.frame = this.frame % this.animation.length
this.speed += this.gravity;
this.y += this.speed;
if(this.y > 245) {this.y = 245};
if(this.y < -100) {this.y = -100}
}},
chute: function(){
let ghostFall2 = this.animation2[0];
ctx.drawImage(sprite, ghostFall2.sX, ghostFall2.sY, this.cW, this.cH, this.x, this.y, this.w, this.h)
console.log(ghostFall2)
},
}
How it works is an requestAnimationFrame loop runs it over and over for the draw() and update() functions - these two work fine, draw paints the sprite item and update just makes it perpetually fall.
Then I also have an EventListener (click) which triggers the flap() function - basically makes it jump (then update brings it back down) - this one also works fine.
The problem comes when im trying to launch the chute() function (also via click event listener) which is supposed to replace my sprite source with a different image, but it never does so - why?
Just expecting for the sprite source to update
Link to codepen if you need to see the code in action - https://codepen.io/aurelradu91/pen/xxzEjQV