parsedSuggestions = () => {
		let suggestionsArray = [];
		if (Array.isArray(props.suggestions) && props.suggestions.length) {
			suggestionsArray = [...withClickIds(props.suggestions)];
		}
		if (renderTriggerMessage && currentValue) {
			suggestionsArray.unshift({
				label: renderTriggerMessage,
				value: renderTriggerMessage,
				_suggestion_type: '_internal_a_i_trigger',
			});
		}

		suggestionsArray = suggestionsArray.map((suggestion) => {
			if (suggestion._suggestion_type === suggestionTypes.Document) {
				// Document suggestions don't have a meaningful label and value
				const newSuggestion = { ...suggestion };
				newSuggestion.label = 'For document suggestions, please implement a renderItem method to display label.';
				// If renderItem is provided we can get the value from it's content
				if (typeof props.renderItem === 'function') {
					const jsxEl = props.renderItem(newSuggestion);
					const innerValue = innerText(jsxEl);
					newSuggestion.value = XSS(innerValue);
				}
				return newSuggestion;
			}
			return suggestion;
		});

		const sectionsAccumulated = [];
		const sectionisedSuggestions = suggestionsArray.reduce((acc, d, currentIndex) => {
			if (sectionsAccumulated.includes(d.sectionId)) return acc;
			if (d.sectionId) {
				acc[currentIndex] = suggestionsArray.filter(g => g.sectionId === d.sectionId);
				sectionsAccumulated.push(d.sectionId);
			} else {
				acc[currentIndex] = d;
			}
			return acc;
		}, {});
		return Object.values(sectionisedSuggestions);
	}
inputValue:
The value which is passed to the html input box.
The onChange handler(event listener on input box) should directly update inputValue.

For uncontrolled components, we maintain the input value(useState - currentValue).
Hence, onChange should call setValue to update currentValue directly.

For controlled components, we get the input value(props.value).
Hence, onChange should call props.onChange,
which then updates currentValue by calling setValue in useEffect.