How to use the @nivo/colors.colorSchemeIds.map function in @nivo/colors

import range from 'lodash/range'
import PropTypes from 'prop-types'
import {
    colorSchemeIds,
    colorSchemes,
    colorInterpolatorIds,
    colorInterpolators,
} from '@nivo/colors'
import { components } from 'react-select'
import ColorsControlItem from './ColorsControlItem'
import Control from './Control'
import PropertyHeader from './PropertyHeader'
import { Help } from './styled'
import Select from './Select'

const colors = colorSchemeIds.map(id => ({
    id,
    colors: colorSchemes[id],
}))

const sequentialColors = colorInterpolatorIds.map(id => ({
    id: `seq:${id}`,
    colors: range(0, 1, 0.05).map(t => colorInterpolators[id](t)),
}))

const SingleValue = props => {
    return (
        
            
        
    )
}

} from '@nivo/colors'
import { components } from 'react-select'
import ColorsControlItem from './ColorsControlItem'
import Control from './Control'
import PropertyHeader from './PropertyHeader'
import { Help } from './styled'
import Select from './Select'

const Value = styled.div`
    font-family: ${({ theme }) => theme.fontFamilyMono};
    margin: 10px 0 5px;
    font-size: 0.8rem;
    line-height: 1.7;
`

const options = colorSchemeIds.map(scheme => {
    let colors = []
    if (isCategoricalColorScheme(scheme)) {
        colors = colorSchemes[scheme]
    } else if (isDivergingColorScheme(scheme)) {
        colors = colorSchemes[scheme][11]
    } else if (isSequentialColorScheme(scheme)) {
        colors = colorSchemes[scheme][9]
    }

    return {
        label: scheme,
        value: scheme,
        colors,
    }
})