How to use the @vx/mock-data.cityTemperature.map function in @vx/mock-data

import { scaleTime, scaleLinear } from '@vx/scale';
import { AxisLeft, AxisBottom } from '@vx/axis';
import { GridRows, GridColumns } from '@vx/grid';
import { cityTemperature as data } from '@vx/mock-data';
import { timeParse } from 'd3-time-format';

const parseDate = timeParse('%Y%m%d');

// accessors
const date = d => parseDate(d.date);
const ny = d => d['New York'];
const sf = d => d['San Francisco'];

// scales
const xScale = scaleTime({
  domain: [Math.min(...data.map(date)), Math.max(...data.map(date))],
});
const yScale = scaleLinear({
  domain: [
    Math.min(...data.map(d => Math.min(ny(d), sf(d)))),
    Math.max(...data.map(d => Math.max(ny(d), sf(d)))),
  ],
  nice: true,
});

export default function Theshold({ width, height, margin /** events */ }) {
  if (width < 10) return null;

  // bounds
  const xMax = width - margin.left - margin.right;
  const yMax = height - margin.top - margin.bottom;

import { timeParse } from 'd3-time-format';

const parseDate = timeParse('%Y%m%d');

// accessors
const date = d => parseDate(d.date);
const ny = d => d['New York'];
const sf = d => d['San Francisco'];

// scales
const xScale = scaleTime({
  domain: [Math.min(...data.map(date)), Math.max(...data.map(date))],
});
const yScale = scaleLinear({
  domain: [
    Math.min(...data.map(d => Math.min(ny(d), sf(d)))),
    Math.max(...data.map(d => Math.max(ny(d), sf(d)))),
  ],
  nice: true,
});

export default function Theshold({ width, height, margin /** events */ }) {
  if (width < 10) return null;

  // bounds
  const xMax = width - margin.left - margin.right;
  const yMax = height - margin.top - margin.bottom;

  xScale.range([0, xMax]);
  yScale.range([yMax, 0]);

  return (