Как отображать изображения и текст с помощью нокаута?

const StoryVM = (model, startId) => {
  const activeStoryId = ko.observable(startId);

  const activeStory = ko.pureComputed(() => {
    const data = model[activeStoryId()]

    return {
      ...data,
      choices: data.choices.map(ChoiceVM)
    };
  });

  const ChoiceVM = ({
    choiceText,
    storyLink,
  }) => {
    return {
      image: storyModel[storyLink]?.image,
      text: choiceText,
      onClick: () => {
        activeStoryId(storyLink);
      }
    }
  }


  return activeStory;
}

const storyModel = {"1":{"text":"Pick a chat","image":"http://placekitten.com/300/200","choices":[{"choiceText":"Pick This","storyLink":"2"},{"choiceText":"no pick this","storyLink":"3"},{"choiceText":"nono this one","storyLink":"4"},{"choiceText":"dont pick this","storyLink":"5"}]},"2":{"text":"Kittens","image":"https://placekitten.com/300/100","choices":[{"choiceText":"Oops. Scared them.","storyLink":"3"}]},"3":{"text":"They are no longer scared","image":"https://placekitten.com/200/100","choices":[{"choiceText":"Poor things.","storyLink":"3"}]}};

ko.applyBindings({
  story: StoryVM(storyModel, "1")
});

.Choices {
  display: flex;
  gap: 1rem;
}

.Choice {
  display: flex;
  flex-direction: column;
  width: 200px;
  height: 150px;
  justify-content: flex-end;
}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>


<div data-bind = "with: story">
  <!-- ko if: image -->
  <img data-bind = "attr: { src: image }">
  <!-- /ko -->

  <h2 data-bind = "text: text"></h2>

  <div data-bind = "foreach: choices" class = "Choices">
    <div class = "Choice">
      <!-- ko if: image -->
      <img data-bind = "attr: { src: image }">
      <!-- /ko -->
      <button data-bind = "click: onClick, text: text"></button>
    </div>
  </div>
</div>