How to use the lit-html/directives/repeat.js.repeat function in lit-html

<form>
        <select required="" name="animationId">
          <option value=""></option>
          ${repeat(animationManager, animation =&gt; html`
            <option value="${animation.id}">${animation.name}</option>
          `)}
        </select>

        <button type="submit">Add animation</button>
      </form>

      

      <div class="items">
    
        ${repeat(animations, animationId =&gt; html`
          
          <button>x</button>
        `)}

      </div>
    `
  }

const { fixtureManager, fixtures } = this

    return html`
      ${shared}

      <style>
        .fixture-list {
          width: 120px;
          height: 120px;
        }
      </style>

      <form>
        <select multiple="" required="" class="fixture-list" name="type">
          <option value=""></option>
          ${repeat(fixtureManager, fixture =&gt; html`
            <option value="${fixture.id}">${fixture.name}</option>
          `)}
        </select>

        <button type="submit">Add fixture</button>
      </form>

      <div class="items">
        ${repeat(fixtures, fixtureId =&gt; html`
          
          <button>x</button>
        `)}
      </div>
    `
  }

<input value="${name}" type="text" class="name">
          <input value="${duration}" min="0" type="number" name="duration" class="name">

          <button type="submit">Save</button>
        

        <button>Remove</button>

        <br><br>

        <form>
          <input placeholder="Step" required="" step="any" max="1" min="0" type="number" name="step">

          <select required="" name="property">
            <option selected="" disabled="" value="">Property</option>
            ${repeat(properties, property =&gt; html`
              <option value="${property}">${property}</option>
            `)}
          </select>

          <input placeholder="Value" required="" type="text" name="value">

          <button type="submit">Add keyframe</button>
        </form>

        <br>

        
      
    `
  }
}

property.isRgb
        ? html`<input type="color">`
        : ''
      }

      ${
        property.isRange
        ? html`<input max="255" min="0" type="number">`
        : ''
      }

      ${
        property.isMapped
        ? html`
          <select>
            ${repeat(property.mapping, mapping =&gt; html`
              <option value="${mapping}">${mapping}</option>
            `)}
          </select>
        `
        : ''
      }

      ${
        property.isMultiRange
        ? html`
          <input type="text">
          <ul>
            ${repeat(property.mapping, mapping =&gt; html`
              <li>${mapping}</li>
            `)}
          </ul>

<div class="server-stat">
            Messages since start
            <div class="badge">${serverStats.total_unique_messages}</div>
        </div>

        <div class="server-stat">
            All frames sent
            <div class="badge">${serverStats.total_messages}</div>
        </div>

        <div class="flex-parent">
            <div class="column-left">
            <ul>
            ${repeat(channels, (channel) =&gt; channel.name, (channel, index) =&gt; html`
            <li>${index + 1} - ${channel.name}</li>
            `)}
            </ul>
            </div>
            <div class="column-right">
                ${channelInfo}
            </div>
        </div>
        `;
    }

height: 240px;
        }

        h2 {
          margin: 24px 0;
        }

        .item:nth-of-type(3) > shop-button > a,
        .item:nth-of-type(4) > shop-button > a {
          padding: 8px 24px;
        }
      }

    

    ${repeat(Object.keys(this._categories), key => {
      const category = this._categories[key];
      return html`<div class="item">
        <a href="/list/${category.name}" class="image-link">
          
        </a>
        <h2>${category.title}</h2>
        
          <a href="/list/${category.name}" aria-label="${category.title} Shop Now">Shop Now</a>
        
      </div>`;
    })}`;
  }

render() {
    const { _items, _authInitialized, _user, _showOffline } = this;
    updateMetadata({
      title: 'My Favorites - Books',
      description: 'My Favorites'
    });

    return html`
      <section>
        <div class="favorites-section">
          <div class="favorites-empty">
            <h3>Your favorites are empty</h3>
            <p>Go <a href="/explore">find some books</a> and add to your favorites</p>
          </div>
          <ul class="books">
            ${_items &amp;&amp; repeat(_items, (item) =&gt; html`
              <li>
                
                  <button title="Remove favorite" class="fav-button">${closeIcon}</button>
                
              </li>
            `)}
          </ul>
        </div>

        <div class="signin-section">
          <p>Please sign in to see the favorites.</p>
          <button class="book-button">Sign in</button>
        </div>
      </section>

render() {
    const { data, error, loading } = this

    const { getTimelineScenes = [] } = data || {}

    return html`
      ${repeat(getTimelineScenes, scene => html`
        ${scene.name}
      `)}
    `
   }

<input min="1" type="number" name="modvWidth">

          <label for="modvHeight">Height</label>
          <input min="1" type="number" name="modvHeight">

          <br>

          <button type="submit">Add</button>
        

        <br>

        <div class="mdc-layout-grid mdc-layout-grid--align-left">
          <div class="mdc-layout-grid__inner">

            ${repeat(venues, venue =&gt; html`

              <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-2">

                
                  <div class="card-actions">
                    <a tabindex="-1" href="/venue/${venue.id}"></a>
                    
                  </div>
                

              </div>

            `)}

          </div>
        </div>

<input required="" type="text">

        <label for="duration">Duration</label>
        <input min="0" type="number" name="duration">

        <label for="amount">Amount</label>
        <input max="512" min="1" type="number" name="amount">

        <button type="submit">Add</button>
      

      <br>

      <div class="container">

        ${repeat(animations, animation =&gt; html`

          <div class="item">
            
            
          </div>

        `)}

      </div>
    `
  }
}