Add ARIA attributes to a footer link within autocomplete search for keyboard accessibility

Hi, I have an autocomplete search form that output returned items and then following the items is a footer link to “View all results” for inputted search term - this link goes to a search results page.

The problem i have is trying to add the footer link into the items array so that the footer link can utilise all the ARIA attributes which are passed onto each result item object - which are role=option and aria-selected: false|true.

Here is the design with the footer link appended after the result items:

And the code in use which is working as expected except for the keyboard selected state:

const autocomplete = useRef(
	createAutocomplete({
		onStateChange({ state }) {
			setAutocompleteState(state)
		},
		getSources() {
			return [
				{
					sourceId: "SOURCE-ID",
					getItems({ query }) {
						return getAlgoliaResults({
							searchClient,
							queries: [
								{
									indexName: "INDEX-NAME",
									query,
									params: {
										hitsPerPage: 5,
										highlightPreTag: "<mark>",
										highlightPostTag: "</mark>",
									},
								},
							],
						})
					},
					getItemUrl({ item }) {
						return item.url
					},
				},
			]
		}
	})
).current

const { getEnvironmentProps } = autocomplete
	useEffect(() => {
		if (!(searchBoxRef.current && panelRef.current && inputRef.current)) {
			return
		}
		const { onTouchStart, onTouchMove } = getEnvironmentProps({
			searchBoxElement: searchBoxRef.current,
			panelElement: panelRef.current,
			inputElement: inputRef.current
		})

		window.addEventListener("touchstart", onTouchStart)
		window.addEventListener("touchmove", onTouchMove)
		return () => {
			window.removeEventListener("touchstart", onTouchStart)
			window.removeEventListener("touchmove", onTouchMove)
		}
	}, [getEnvironmentProps, searchBoxRef, panelRef, inputRef])


<SearchResults key={`source-${index}`}>
	{items.length > 0 && (
		<ul {...autocomplete.getListProps()}>
			{items.map((item) => {
				return (
					<li
						key={item.objectID}
						{...autocomplete.getItemProps({
							item,
							source,
						})}
					>
						<a href={item.url}>
						<span
							dangerouslySetInnerHTML={{
								__html: item._highlightResult.title.value
							}}
						/>
						</a>
					</li>
				)
			})}
		</ul>
	)}
	<p><a href="/search-results">View all results for <strong>{autocompleteState.query}</strong></a></p>
</SearchResults>

Any advice appreciated. thanks