Gutenberg RadioControl saving but not not selecting radio.

The RadioControl attribute below saves data but the selected radio isn’t checked. I think the state isn’t being updated, or I’m using the wrong value in the selected attribute. In the code below, the component is isolated below from the rest of the block.

Can someone tell me what I’m doing wrong?

import { registerBlockType } from '@wordpress/blocks';
import {  RadioControl } from '@wordpress/components';

// Import our CSS files
import './style.scss';
import './editor.scss';

registerBlockType( 'de/radio', {
	title: 'DE Radio',
	icon: 'media-document',
	category: 'de',
	attributes: {
		position: {
			type: 'text',
			selector: '.position',
		},
	},
	edit( { attributes, setAttributes } ) {

		const positionHandler = function( position ) {
			return setAttributes( {
				position: position,
			} );
		}

		return (
			<div className="container de_radio serviceCard">

				<RadioControl
					label="Image Position"
					selected={ attributes.positon }
					className="position"
					options={ [
						{ label: 'Left', value: 'left-align' },
						{ label: 'Right', value: 'right-align' },
					] }
					onChange={ positionHandler }
				/>

			</div>
		);
	},

	save( { attributes } ) {

		return (
			<div className="radio">
					{attributes.position}
			</div>
		);
	},
} );

Thank you for your help.