How can I draw text on top of an image in a sprite?

Hi, I'm working on creating a modal text sprite of sorts, for when a player finishes a round. This is my modal.lua file, where i have a single png for the background.

local gfx <const> = playdate.graphics

local screenWidth = playdate.display.getWidth()
local screenHeight = playdate.display.getHeight()
local image = gfx.image.new('images/modal.png')
assert(image)

class('Modal').extends(gfx.sprite)

function Modal:init(text)
  Modal.super.init(self, image)
  self.text = text
  self:moveTo(screenWidth / 2, screenHeight / 2)
end

function Modal:draw()
  Modal.super.draw()

  gfx.drawText(self.text, 0, 0)
end

I'm wondering if the text needs to be its own sprite too, since i'm calling the super draw method? Or is there something else that I am missing here?

So i kinda figured it out, but still not sure if this the best way to go about it. I changed the Modal class to just an empty one that manages two sprites:

local gfx <const> = playdate.graphics

local screenWidth = playdate.display.getWidth()
local screenHeight = playdate.display.getHeight()
local image = gfx.image.new('images/modal.png')
assert(image)

class('Modal').extends()

function Modal:init(text)
  self.background = gfx.sprite.new(image)
  self.textSprite = gfx.sprite.new()
  self.textSprite:setSize(self.background.width - 20, self.background.height - 20)
  self.textSprite:moveTo(screenWidth / 2, screenHeight / 2)
  self.background:moveTo(screenWidth / 2, screenHeight / 2)
  self.textSprite.text = text

  function self.textSprite:draw()
    gfx.drawTextAligned(self.text, self.width / 2, 0, kTextAlignment.center)
  end
end

function Modal:add()
  self.background:add()
  self.textSprite:add()
end

function Modal:remove()
  self.background:remove()
  self.textSprite:remove()
end

You're on the right lines