How to use the @nivo/core.patternDotsDef function in @nivo/core

const generateCode = settings =>
    `
// helper
patternDotsDef('${patternId}', ${JSON.stringify(settings, null, '  ')})
// plain object
${JSON.stringify(patternDotsDef(patternId, settings), null, '    ')}
`.trim()

left: 60,
    },

    padding: 0.3,
    innerPadding: 0,
    minValue: 'auto',
    maxValue: 'auto',

    groupMode: 'stacked',
    layout: 'vertical',
    reverse: false,

    colors: { scheme: 'nivo' },
    colorBy: 'id',
    defs: [
        patternDotsDef('dots', {
            background: 'inherit',
            color: '#38bcb2',
            size: 4,
            padding: 1,
            stagger: true,
        }),
        patternLinesDef('lines', {
            background: 'inherit',
            color: '#eed312',
            rotation: -45,
            lineWidth: 6,
            spacing: 10,
        }),
    ],
    fill: [
        { match: { id: 'fries' }, id: 'dots' },

colors={{ scheme: 'spectral' }}
                        padding={0.3}
                        axisLeft={null}
                        axisBottom={null}
                        enableGridY={false}
                        enableLabel={false}
                        colorBy="index"
                        defs={[
                            patternLinesDef('example2.lines', {
                                rotation: -45,
                                lineWidth: 4,
                                spacing: 6,
                                background: 'transparent',
                                color: 'inherit',
                            }),
                            patternDotsDef('example2.dots', {
                                background: 'transparent',
                                color: 'inherit',
                                size: 4,
                                padding: 0,
                                stagger: true,
                            }),
                            patternSquaresDef('example2.squares', {
                                background: 'transparent',
                                color: 'inherit',
                                stagger: true,
                                size: 8,
                                padding: 0,
                            }),
                        ]}
                        fill={[
                            { match: d => d.data.index % 3 === 0, id: 'example2.lines' },

left: 60,
            },

            padding: 0.2,
            innerPadding: 0,
            minValue: 'auto',
            maxValue: 'auto',

            groupMode: 'stacked',
            layout: 'vertical',
            reverse: false,

            colors: 'nivo',
            colorBy: 'id',
            defs: [
                patternDotsDef('dots', {
                    background: 'inherit',
                    color: '#38bcb2',
                    size: 4,
                    padding: 1,
                    stagger: true,
                }),
                patternLinesDef('lines', {
                    background: 'inherit',
                    color: '#eed312',
                    rotation: -45,
                    lineWidth: 6,
                    spacing: 10,
                }),
            ],
            fill: [
                { match: { id: 'fries' }, id: 'dots' },

defs: (value, values) => {
            if (!values['showcase pattern usage']) return

            return [
                patternDotsDef('dots', {
                    background: 'inherit',
                    color: 'rgba(255, 255, 255, 0.3)',
                    size: 4,
                    padding: 1,
                    stagger: true,
                }),
                patternLinesDef('lines', {
                    background: 'inherit',
                    color: 'rgba(255, 255, 255, 0.3)',
                    rotation: -45,
                    lineWidth: 6,
                    spacing: 10,
                }),
            ]
        },
        fill: (value, values) => {

}}
            data={generateCountriesData(
                ['rock', 'jazz', 'hip-hop', 'reggae', 'folk', 'soul', 'funk'],
                { size: 7 }
            )}
            keys={['rock', 'jazz', 'hip-hop', 'reggae', 'folk', 'soul', 'funk']}
            offsetType="none"
            colors={colors}
            enableGridX={false}
            enableGridY={false}
            axisBottom={null}
            isInteractive={false}
            animate={false}
            borderWidth={3}
            borderColor="#000000"
            defs={[patternDotsDef('pattern')]}
        />
        <div>STREAM</div>
    
)

state = {
        ...generateLightDataSet(),
        settings: {
            ...RoseDefaultProps,
            margin: {
                top: 20,
                right: 130,
                bottom: 20,
                left: 60,
            },

            minValue: 'auto',
            maxValue: 'auto',

            defs: [
                patternDotsDef('dots', {
                    background: 'inherit',
                    color: '#38bcb2',
                    size: 4,
                    padding: 1,
                    stagger: true,
                }),
                patternLinesDef('lines', {
                    background: 'inherit',
                    color: '#eed312',
                    rotation: -45,
                    lineWidth: 6,
                    spacing: 10,
                }),
            ],
            fill: [
                { match: { id: 'fries' }, id: 'dots' },

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

enableGridX: true,
    enableGridY: false,

    curve: 'catmullRom',
    offsetType: 'silhouette',
    order: 'none',

    colors: { scheme: 'nivo' },
    fillOpacity: 0.85,
    borderWidth: 0,
    borderColor: {
        theme: 'background',
    },

    defs: [
        patternDotsDef('dots', {
            background: 'inherit',
            color: '#2c998f',
            size: 4,
            padding: 2,
            stagger: true,
        }),
        patternSquaresDef('squares', {
            background: 'inherit',
            color: '#e4c912',
            size: 6,
            padding: 2,
            stagger: true,
        }),
    ],
    fill: [
        { match: { id: 'Paul' }, id: 'dots' },

{settings => (
                <svg height="{SAMPLE_SIZE}" width="{SAMPLE_SIZE}">
                    <defs></defs>
                    <rect fill="{`url(#${patternId})`}" height="{SAMPLE_SIZE}" width="{SAMPLE_SIZE}"></rect>
                </svg>
            )}