How to use the @vx/mock-data.appleStock.slice function in @vx/mock-data

import { curveMonotoneX } from '@vx/curve';
import { localPoint } from '@vx/event';
import { GridColumns, GridRows } from '@vx/grid';
import { appleStock } from '@vx/mock-data';
import { scaleLinear, scaleTime } from '@vx/scale';
import { AreaClosed, Bar, Line } from '@vx/shape';
import { Tooltip, withTooltip } from '@vx/tooltip';
import { bisector, extent, max } from 'd3-array';
import { timeFormat } from 'd3-time-format';
import React from 'react';

const stock = appleStock.slice(800);
const formatDate = timeFormat("%b %d, '%y");

// accessors
const xStock = d => new Date(d.date);
const yStock = d => d.close;
const bisectDate = bisector(d => new Date(d.date)).left;

class Area extends React.Component {
  constructor(props) {
    super(props);
    this.handleTooltip = this.handleTooltip.bind(this);
  }
  handleTooltip({ event, xScale, yScale }) {
    const { showTooltip } = this.props;
    const { x } = localPoint(event);
    const x0 = xScale.invert(x);

import React, { useState } from 'react';
import { Group } from '@vx/group';
import { AreaClosed, Bar } from '@vx/shape';
import { AxisLeft, AxisBottom } from '@vx/axis';
import { curveMonotoneX } from '@vx/curve';
import { scaleTime, scaleLinear } from '@vx/scale';
import { appleStock } from '@vx/mock-data';
import { Brush } from '@vx/brush';
import { PatternLines } from '@vx/pattern';

/**
 * Initialize some variables
 */
const stock = appleStock.slice(1200);
const min = (arr, fn) => Math.min(...arr.map(fn));
const max = (arr, fn) => Math.max(...arr.map(fn));
const extent = (arr, fn) => [min(arr, fn), max(arr, fn)];
const axisColor = '#fff';
const axisBottomTickLabelProps = {
  textAnchor: 'middle',
  fontFamily: 'Arial',
  fontSize: 10,
  fill: axisColor,
};
const axisLeftTickLabelProps = {
  dx: '-0.25em',
  dy: '0.25em',
  fontFamily: 'Arial',
  fontSize: 10,
  textAnchor: 'end',