Having trouble setting svg color when rendering svg file

Question

I'm creating a svg logo maker for a class project and the program works great expect when logo.svg is generated the fill is left blank and for the life of me I'm unable to figure out why. When ran in the terminal using "node index", inquirer prompts the user for all needed questions and they all are shown in the generated file expect in the shape tag. Any help is greatly appreciated!

Example svg file:

<svg version="1.1" width="300" height="200" xmlns="http://www.w3.org/2000/svg"> <circle cx="150" cy="100" r="80" fill=""/> <text x="150" y="125" font-size="60" text-anchor="middle" fill="pink">ABC</text> </svg>

Heres my index.js file:

class svg {
  constructor() {
    this.textElement = "";
    this.shapeElement = "";
  }
  render() {
    return `<svg version="1.1" width="300" height="200" xmlns="http://www.w3.org/2000/svg">
                ${this.shapeElement}
                ${this.textElement}
                </svg>`;
  }
  setText(text, color) {
    this.textElement = `<text x="150" y="125" font-size="60" text-anchor="middle" fill="${color}">${text}</text>`;
  }
  setShape(shape, color) {
    this.shapeElement = shape.render(color);
  }
}

function writeFile(fileName, data) {
  fs.writeFile(fileName, data, (err) => {
    if (err) throw err;
    console.log("The file has been created!");
  });
}

async function start() {
  let svgString = "";
  const svgFile = "logo.svg";

  const answers = await inquirer.prompt(questions);

  let userText = answers.text;
  let userTextColor = answers["text-color"];
  let userShape = answers.shape;
  let userShapeColor = answers["shape-color"];

  const newSvg = new svg();
  newSvg.setText(userText, userTextColor);

  switch (userShape) {
    case "Square":
      newSvg.setShape(new Square(), userShapeColor);
      break;
    case "Circle":
      newSvg.setShape(new Circle(), userShapeColor);
      break;
    case "Triangle":
      newSvg.setShape(new Triangle(), userShapeColor);
      break;
    default:
      console.log("Invalid shape");
  }
  svgString = newSvg.render();
  writeFile(svgFile, svgString);
}

start();

This is what my shapes.js file looks like:

class Shape {
  constructor() {
    this.color = "";
  }
  setColor(color) {
    this.color = (color);
  }
}

class Square extends Shape {
  render() {
    return `<rect x="50" width="200" height="200" fill="${this.color}" />`;
  }
}

class Circle extends Shape {
  render() {
    return `<circle cx="150" cy="100" r="80"  fill="${this.color}"/>`;
  }
}

class Triangle extends Shape {
  render() {
    return `<polygon points="50,0 100,100 0,100" fill="${this.color}" />`;
  }
}