Custom input field component: Using the correct path? | Payload | Page 1

I am trying to build a custom input component. I tried to use the path to get the correct value from the field. But in my group, all inputs are receiving the same path/value. What i am missing here?

Simple range slider component:

import React from 'react';
import { useField } from 'payload/components/forms';
import { Label } from 'payload/components/forms';
import { Props } from 'payload/components/fields/Number';

const RangeSelect: React.FC<Props> = (props) => {
    const { path, label, required } = props;
    const { value = 0.5, setValue } = useField({ path });
    return (
        <div>
            <Label htmlFor={path} label={label} required={required} />
            {value} // Changes for all inputs
            <input
                type='range'
                min='0'
                max='1'
                step='0.01'
                onChange={e => setValue(e.currentTarget.value)}
            />
        </div>
    );
};

export default RangeSelect;

import { Field } from 'payload/types';
import RangeSelect from '../components/RangeSelect';

const Classification: Field = {
    name: 'classification',
    type: 'group',
    label: 'Classification',
    fields: [
        {
            name: 'option1',
            type: 'ui',
            label: 'Option1',
            admin: {
                components: {
                    Field: RangeSelect
                }
            },
        },
        {
            name: 'option2',
            type: 'ui',
            label: 'Option2',
            admin: {
                components: {
                    Field: RangeSelect
                }
            },
        }
    ]
};

export default Classification;

#Custom input field component: Using the correct path?