1-RadioGroup.jsx

import { 
	cloneElement,
	useCallback,
} from 'react'

function RadioGroup(props) {
	const {
		children,
		onChange,
	} = props

	// Attach the `onChange` listener to a child
	const processChild = useCallback(child => {
		return cloneElement(child, { onChange })
	}, [onChange])

	return (
		<ul className="radio-group">
			{children.map(processChild)}
		</ul>
	)
}

export { RadioGroup }
export { RadioOption } from '2-RadioOption'

2-RadioOption.jsx

import { useCallback } from 'react'

function RadioOption(props) {
	const {
		children,
		id,
		onChange,
		value,
	} = props

	const handleChange = useCallback(() => {
		onChange(value)
	}, [
		onChange,
		value,
	])

	return (
		<li className="radio-option">
			<label htmlFor={id}>
				<input
					id={id}
					onChange={handleChange}
					type="radio" />

				<p>{children}</p>
			</label>
		</li>
	)
}

export { RadioOption }

3-Example.jsx

import { useCallback } from 'react'
import { 
	RadioButton,
	RadioGroup,
} from 'RadioGroup'

export function Example() {
	const handleChange = useCallback(value => console.log(value), [])
	
	return (
		<RadioGroup onChange={handleChange}>
			<RadioOption 
				id="profileVisibility:public"
				value="public">
				Your profile will be visible to everybody on Trezy.com, and may appear in search engine results.
			</RadioOption>

			<RadioOption
				id="profileVisibility:unlisted"
				value="unlisted">
				Your profile will be visible to everybody on Trezy.com, but it <em>will not</em> appear in search engine results.
			</RadioOption>

			<RadioOption
				id="profileVisibility:private"
				value="private">
				Your profile will not be visible to anybody but you.
			</RadioOption>
		</RadioGroup>
	)
}