function InputBasic({
		value,
		onChange,
		onKeyDown,
		country,
		inputFormat,
		metadata = defaultMetadata,
		inputComponent: Input = 'input',
		//
		// The rest of the properties listed here are just to get the `rest` props
		// that will be passed to the DOM `<input/>` element.
		//
		// `international` property is deprecated and is not used.
		international,
		// `withCountryCallingCode` property is deprecated and is not used.
		withCountryCallingCode,
		...rest
	}, ref) {
		const prefix = getPrefixForFormattingValueAsPhoneNumber({
			inputFormat,
			country,
			metadata
		})

		const _onChange = useCallback((event) => {
			let newValue = parseIncompletePhoneNumber(event.target.value)
			// By default, if a value is something like `"(123)"`
			// then Backspace would only erase the rightmost brace
			// becoming something like `"(123"`
			// which would give the same `"123"` value
			// which would then be formatted back to `"(123)"`
			// and so a user wouldn't be able to erase the phone number.
			//
			// This issue is worked around with this simple hack:
			// when "old" and "new" parsed values are the same,
			// it checks if the "new" formatted value could be obtained
			// from the "old" formatted value by erasing some (or no) characters at the right side.
			// If it could then it's likely that the user has hit a Backspace key
			// and what they really intended was to erase a rightmost digit rather than
			// a rightmost punctuation character.
			//
			if (newValue === value) {
				const newValueFormatted = format(prefix, newValue, country, metadata)
				if (newValueFormatted.indexOf(event.target.value) === 0) {
					// Trim the last digit (or plus sign).
					newValue = newValue.slice(0, -1)
				}
			}
			onChange(newValue)
		}, [
			prefix,
			value,
			onChange,
			country,
			metadata
		])

		const _onKeyDown = useInputKeyDownHandler({
			onKeyDown,
			inputFormat
		})

		return (
			<Input
				{...rest}
				ref={ref}
				value={format(prefix, value, country, metadata)}
				onChange={_onChange}
				onKeyDown={_onKeyDown}/>
		)
	}
`InputBasic` is the most basic implementation of a `Component`
that can be passed to `<PhoneInput/>`. It parses and formats
the user's input but doesn't control the caret in the process:
when erasing or inserting digits in the middle of a phone number
the caret usually jumps to the end (this is the expected behavior).
Why does `InputBasic` exist when there's `InputSmart`?
One reason is working around the [Samsung Galaxy smart caret positioning bug]
(https://github.com/catamphetamine/react-phone-number-input/issues/75).
Another reason is that, unlike `InputSmart`, it doesn't require DOM environment.