Set ref of active IonSegmentButton with multiple buttons

Ionic Framework Ionic React
1

Hi,

I have news categories out of a json source and I want to scroll the active item into the viewport on pageload&/didEnter. Its easy onClick, but I cant set the correct reference, within the map function. I always get {current: null} with console.log.

const segmentButtonClicked = (event: any) => {
		event.target.scrollIntoView({
			behavior: 'smooth',
			inline: 'start',
		});
	};

	const buttonRef = useRef(null);

	useIonViewDidEnter(() => {
		console.log(buttonRef);
		/*
		buttonRef.current.scrollIntoView({
			behavior: 'smooth',
			inline: 'start',
		});
		*/
	});

	return (
		<>
			<IonSegment mode="md" scrollable value={selected}>
				{items.map((data, i) => (
					<IonSegmentButton
						value={data.route}
						key={i}
						id={'btn' + i}
						ref={() => {
							console.log(selected);
							console.log(data.route);
							if (selected === data.route) {
								console.log('matched');
								console.log('----------');
								return buttonRef;
							} else {
								console.log('nope');
								console.log('----------');
							}
						}}
						onClick={(e) => {
							segmentButtonClicked(e);
							window.appHistory.push(data.route);
							e.preventDefault();
						}}
					>
						<IonLabel>{i18n.language === 'de' ? data.name.de : data.name.en}</IonLabel>
					</IonSegmentButton>
				))}
			</IonSegment>
		</>
	);

Is it possible, that arrow functions are not supported/allowed within the ref attribute? My if-statement works perfectly, but the ref is wrong/not set after the map loop.

PS: My code is not refactored yet :wink: