Gutenberg: How to use RangeControl in the editor itself and make it work?

I tried to use the RangeControl component outside and in the block editor itself. But it looks like there are styles missing, and it does not work properly.

Is there a trick to use it in the block in Gutenberg somehow?

export default function Edit( { attributes, setAttributes } ) {

const blockProps = useBlockProps();

const MyRangeControl = () => {
    const [ columns, setColumns ] = useState( 2 );
 
    return(
        <RangeControl
            label="Rating"
            value={ attributes.value }
            onChange={ onChangeValue }
            min={ 1 }
            max={ 10 }
            step={ 0.5 } 
        />
    );
};

return (
    <p { ...blockProps }>
    <MyRangeControl/>
    </p>
);

}

EDIT: It works if I add it like this, but it does not save the value:

export default function Edit( { attributes, setAttributes } ) {

    const blockProps = useBlockProps();

    const onChangeValue = ( newValue ) => {
        setAttributes( { value: newValue} )
    }


    return (
        <p { ...blockProps }>
        <RangeControl
                label="Rating"
                value={ attributes.value }
                onChange={ onChangeValue }
                min={ 1 }
                max={ 10 }
                step={ 0.5 } 
            />
        </p>
    );
}