Uncaught runtime errors; it happened sometimes (when I click for loading data quickly) about timelines-chart HOT 3 OPEN

import { useEffect, useState } from 'react';
import { GET_TIME_LINE_LIST } from './api/gql/devConf';
import { useQuery } from '@apollo/client';
import Timelines from './Timelines';
import moment from 'moment';
import Tabs from './component/Tab';

function makePeriodFromDaylist(group, dates) {
	//... make date period from data
}

function configRangeData(group, orderRecord) {
       //.. make data for timelinechart
	return [
		{
			label: '',
			data: makePeriodFromDaylist(group, orderDayList),
		},
	];
}

function makeGroupData(data) {
	const uniqueOrderName = [...new Set(data.map((item) => item.orderName))];
	const resultData = uniqueOrderName.map((orderName) => ({
		group: orderName,
		data: configRangeData(
			orderName,
			data.filter((v) => v.orderName === orderName)
		),
	}));
	return resultData;
}

export default function App() {
	const [category, setCategory] = useState({ categoryKey: 3, categoryName: 'medicine' });
	const { loading, error, data } = useQuery(GET_TIME_LINE_LIST, {
		fetchPolicy: 'network-only',
		variables: {
			chartNo: '00-0000001',
			category: category.categoryKey,
			inDate: '',
		},
	});

	function makeCategoryTab(categoryList) {
		function onSetCategory(cat) {
			setCategory(cat);
		}
		return <Tabs data={categoryList} category={category} onSetCategory={onSetCategory} />;
	}

	if (loading) return <>{'Loading...'}</>;
	if (error) return <>{'Error ${error.message'}}</>;
	if (data) {
		const timelineList = data?.getTimelineList?.timelineList;
		if (timelineList.length > 0) {
			return (
				<>
					<div className='Tabs'>
						<span className='TitleCaption'>{'Medicine TimeLine'}</span>
						<ul className='nav'>{makeCategoryTab()}</ul>
					</div>
					<Timelines data={makeGroupData(timelineList)} />
				</>
			);
		} else {
			return <></>;
		}
	}

	return <></>;
}