Dropdown Menu For Images P5js

I am trying to make a drop down menu in p5js that displays images. I keep running into an error with loading images. When I attempted to troubleshoot and loaded an image in another sketch I did not get the error but I am getting it here. I am hoping a fresh pair of eyes could help. Thank you for your time and help!

let picker; 
let drum1, drum2, drum3, drum4, drum5;
let img;
let drumType = 'what';

function setup() {
    createCanvas(windowWidth, windowHeight);

    drum1 = loadImage('drum1.jgp');
    drum2 = loadImage('drum2.jpg');
    drum3 = loadImage('drum3.jpg');
    drum4 = loadImage('drum4.jpg');
    drum5 = loadImage('drum5.jpg');

    textAlign(CENTER);
    background(200);
  
    picker = createSelect();
 
    picker.position(10, 10);

    picker.option('djembe');
    picker.option('two hand drums');
    picker.option('one hand drum');
    picker.option('Talking drum');
    picker.option('five hand drums');
   
    picker.changed(pickEvent);

    img = drum5;
}

function draw() {
    background(200, 220, 10);
    textAlign(LEFT);
    image(img, 0, 0, width, height);
    text(trim + ' is a good drum', 10, 50); // look up what trim is

}

function pickEvent() {
    // get the item chosen with .value()
    drumType = picker.value();
        
    if (drumType === 'djembe') {
        img = drum1;
    } else if (drumType === 'two hand drum') {
        img = drum2;
    } else if (drumType === 'one hand drum') {
        img = drum3;
    } else if (drumType === 'talking drum'){
        img = drum4;
    } else  {
        img = drum5;
    }

}