For loop not working in component

Help
1

I’m trying to create a list component in jekyll-spark to encapsulate some HTML as below. The component renders the array ok, but does not iterate over it.

If I move the code to the post, the list items show correctly. The for loop doesn’t work in the component for some reason. I’m using Jekyll 4.2.0 and Ruby 3.0.0. Any help much appreciated, thanks

// POST
{% assign listItems = "1,2,3,4" | split: ';' %}

{% UlBullets listItems: listItems %}

<ul class="ul-bullet">
   {% for item in listItems %} // loop works
      <li>{{ item }}</li>
   {% endfor %}
</ul>


// COMPONENT
module Jekyll
  class UlBulletsComponent < ComponentTag
    def template(context)
      listItems = @props["listItems"]

      render = %Q[
        <p>#{listItems}</p> // renders array
        <ul class="ul-bullet">
          {% for item in listItems %} // loop works in post but not here 
            <li>{{ item }}</li>
          {% endfor %}
        </ul>
      ]
    end
  end
end