How to use the @vx/mock-data.exoplanets.filter function in @vx/mock-data

import React from 'react';
import { Group } from '@vx/group';
import { Pack } from '@vx/hierarchy';
import { hierarchy } from 'd3-hierarchy';
import { scaleQuantize } from '@vx/scale';
import { exoplanets as data } from '@vx/mock-data';

const extent = (allData, value = d => d) => [
  Math.min(...allData.map(value)),
  Math.max(...allData.map(value)),
];

const exoplanets = data.filter(d => d.distance === 0);
const planets = data.filter(d => d.distance !== 0);
const pack = { children: [{ children: planets }].concat(exoplanets) };

const colorScale = scaleQuantize({
  domain: extent(data, d => d.radius),
  range: ['#ffe108', '#ffc10e', '#fd6d6f', '#855af2', '#11d2f9', '#49f4e7'],
});

export default ({
  width,
  height,
  margin = {
    top: 10,
    left: 30,
    right: 40,
    bottom: 80,

import React from 'react';
import { Group } from '@vx/group';
import { Pack } from '@vx/hierarchy';
import { hierarchy } from 'd3-hierarchy';
import { scaleQuantize } from '@vx/scale';
import { exoplanets as data } from '@vx/mock-data';

const extent = (allData, value = d => d) => [
  Math.min(...allData.map(value)),
  Math.max(...allData.map(value)),
];

const exoplanets = data.filter(d => d.distance === 0);
const planets = data.filter(d => d.distance !== 0);
const pack = { children: [{ children: planets }].concat(exoplanets) };

const colorScale = scaleQuantize({
  domain: extent(data, d => d.radius),
  range: ['#ffe108', '#ffc10e', '#fd6d6f', '#855af2', '#11d2f9', '#49f4e7'],
});

export default ({
  width,
  height,
  margin = {
    top: 10,
    left: 30,
    right: 40,
    bottom: 80,
  },