I have tried Worksheet003 - 2 challenge many times, but it doesn’t work.

Challenge: Change the behavior so that when you mouse over a column, you turn it red and it stays red until the next time you mouse over it again, at which point the column goes back to white.

https://editor.p5js.org/HanBao/full/xdnc69MmK

let leftred = false;

function setup() {
createCanvas(600, 600);
}

function draw() {
background(255);
let rectwidth=width/3;
rect(0,0,rectwidth,height);

if(mouseX<rectwidth){
leftred = !leftred;
if(leftred==true){
fill(255,0,0);
}
else{
fill(255);
}
}
else if(mouseX>=rectwidth && mouseX<rectwidth*2){
rect(rectwidth,0,rectwidth,height);
fill(255,0,0);
noStroke();
}
else if(mouseX>=rectwidth*2){
rect(rectwidth*2,0,rectwidth,height);
fill(255,0,0);
noStroke();
}
}

https://editor.p5js.org/HanBao/sketches/pUj6O7pMA

let mygreen = "#98E5B0";
let myyellow = "#FFFF00";
let myblue = "#A0D3E8";
let myorange = "#FFB75B";
let circlesize1 = 10;
let circlesize2 = 40;
let scaleFactor = 1;
let ball = {
x: 200,
y: 200,
r: 15,
xSpeed: 3,
ySpeed: 2,
color: "#FFFFFF"
};

function setup() {
createCanvas(400, 400);
}

function draw() {
background(245);

if (mouseX > width / 2 && mouseY > height / 2) {
fill(mygreen);
}
if (mouseX < width / 2 && mouseY > height / 2) {
fill(myyellow);
}
if (mouseX > width / 2 && mouseY < height / 2) {
fill(myblue);
}
if (mouseX < width / 2 && mouseY < height / 2) {
fill(myorange);
}

noStroke();
let r1 = mouseX - 30;
let r2 = mouseY - 30;
if (mouseX < width / 2 && mouseY < width / 2) {
r1 = 150;
r2 = 150;
}
r1 = max(r1, 150);
r2 = max(r2, 150);
ellipse(200, 200, r1, r2);