Implement TimezonePicker component

src/components/General/TimezonePicker.js

@@ -0,0 +1,26 @@
+import React, { useState, useEffect } from 'react';
+import { timezones } from '../../assets/data/timezonesFlat';
+import { InputPicker } from 'rsuite';
+
+export default function TimezonePicker(props) {
+	const [timezone, setTimezone] = useState('');
+
+	useEffect(() => {
+		console.log('useEffect:', timezone);
+	}, [timezone]);
+
+	return (
+		<InputPicker
+			data={timezones}
+			// cleanable={false}
+			style={{ width: 320 }}
+			labelKey='timezone'
+			groupBy='area'
+			placeholder='Type to search and select your timezone'
+			onSelect={(value, item, event) => setTimezone(item.timezone)}
+			onClean={(event) => setTimezone('')}
+			value={timezone}
+			valueKey='timezone'
+		/>
+	);
+}

src/components/General/TimezonesCascader.js

@@ -1,17 +0,0 @@
-import React from 'react';
-import { timezones } from '../../assets/data/timezones';
-import { Cascader } from 'rsuite';
-
-export default function TzDropdown() {
-	// do something here
-	// const handleSelect = event => {
-	// 	console.log(event)
-	// }
-
-	return (
-		<>
-			<h1>Aha!</h1>
-			<Cascader data={timezones} style={{ width: 224 }} />
-		</>
-	);
-}