How to use the @mapbox/batfish/data/stories-data.map function in @mapbox/batfish

import React from 'react';
import storiesData from '@mapbox/batfish/data/stories-data';
import PageShell from './page-shell';
import SidebarNavigation from './sidebar-navigation';
import getLegibleDate from '../utilities/get-legible-date';

const sidebarItems = storiesData.map((story) => {
  return {
    content: story.frontMatter.title,
    url: story.path
  };
});

export default class StoryWrapper extends React.Component {
  render() {
    const { props } = this;

    let subtitleElement = <div>;
    if (props.frontMatter.subtitle) {
      subtitleElement = (
        <div>{props.frontMatter.subtitle}</div>
      );
    }</div>

render() {
    const { props } = this;

    const storyItems = storiesData.map((story) => {
      return (
        <a href="{story.path}">
          <div>{story.frontMatter.title}</div>
          <div>{story.frontMatter.subtitle}</div>
        </a>
      );
    });

    return (
      
        <h1>Stories!</h1>
        <div>All by Stephen Crane.</div>