How to use the @nivo/generators.generateCountriesData function in @nivo/generators

]),
                        ]}
                        fill={[{ match: '*', id: 'example2' }]}
                        borderWidth={1}
                        borderColor="inherit:darker(0.2)"
                        isInteractive={false}
                        animate={false}
                        theme={theme.nivo}
                    />
                
                <div>
                    </div>

{ match: d => d.data.index % 3 === 1, id: 'example2.dots' },
                            { match: d => d.data.index % 3 === 2, id: 'example2.squares' },
                        ]}
                        borderWidth={2}
                        borderColor="inherit"
                        isInteractive={false}
                        animate={false}
                        theme={theme.nivo}
                    />
                
                <div>
                    </div>

import React from 'react'
import { storiesOf } from '@storybook/react'
import { action } from '@storybook/addon-actions'
import { generateCountriesData, sets } from '@nivo/generators'
import range from 'lodash/range'
import random from 'lodash/random'
import { useTheme } from '@nivo/core'
import { Bar } from '../src'

const keys = ['hot dogs', 'burgers', 'sandwich', 'kebab', 'fries', 'donut']
const commonProps = {
    width: 900,
    height: 500,
    margin: { top: 60, right: 80, bottom: 60, left: 80 },
    data: generateCountriesData(keys, { size: 7 }),
    indexBy: 'country',
    keys,
    padding: 0.2,
    labelTextColor: 'inherit:darker(1.4)',
    labelSkipWidth: 16,
    labelSkipHeight: 16,
}

const stories = storiesOf('Bar', module)

stories.add('stacked', () => )

stories.add('stacked horizontal', () => (
    
))

export const generateHeavyDataSet = () => ({
    data: generateCountriesData(dishes, { size: 22, min: 0, max: 100 }),
    keys: dishes,
})

export const generateHeavyDataSet = () => ({
    data: generateCountriesData(dishes, { size: 21, max: 200 }),
    keys: dishes,
})

export const generateLightDataSet = () => ({
    data: generateCountriesData(dishes.slice(0, 6), { size: 7, max: 200 }),
    keys: dishes.slice(0, 6),
})

const TreeMap = () => (
    <div>
        
        <div>TREEMAP</div>
    </div>
)

enableGridY={false}
                        enableLabel={false}
                        colors={{ scheme: 'spectral' }}
                        borderWidth={0}
                        borderColor="#333"
                        isInteractive={false}
                        animate={false}
                        theme={theme.nivo}
                    />
                
                <div>
                    
                </div>

import React from 'react'
import { storiesOf } from '@storybook/react'
import { generateCountriesData } from '@nivo/generators'
import { BarCanvas } from '../src'

const keys = ['hot dogs', 'burgers', 'sandwich', 'kebab', 'fries', 'donut']
const commonProps = {
    width: 900,
    height: 500,
    margin: { top: 60, right: 80, bottom: 60, left: 80 },
    data: generateCountriesData(keys, { size: 7 }),
    indexBy: 'country',
    keys,
    padding: 0.2,
    labelTextColor: 'inherit:darker(1.4)',
    labelSkipWidth: 16,
    labelSkipHeight: 16,
}

const stories = storiesOf('BarCanvas', module)

stories.add('custom tooltip', () => (
     (
            <strong color="" style="{{">
                {id}: {value}</strong>

colors={colors}
                            theme={homeTheme}
                            enableLabel={false}
                            animate={false}
                            isInteractive={false}
                            {...commonAxes}
                        />
                        <span>
                            <span>Bar documentation</span>
                        </span>