using react library help me do some testing on the following code

/* eslint-disable react/function-component-definition */
import React, { useEffect, useState } from 'react';
import {
	notification, Row,
} from 'antd';
import {
	Cell,
	Bar,
	BarChart,
	LabelList,
	Line,
	LineChart,
	ScatterChart,
	Scatter,
	XAxis,
	YAxis,
	ZAxis,
	CartesianGrid,
	Tooltip,
	ReferenceLine,
	ResponsiveContainer,
} from 'recharts';
import { t } from 'i18next';
import { CustomTooltip } from 'data/utils/chartFunctions';

import { MMolienda } from 'domain/models/Molienda';
import { PoToolTipData } from 'domain/interfaces/PoToolTipData';
import { EnumMoliendas } from 'presentation/components/constants/enums';
import { MPLMoliendaIBP } from 'domain/models/PLMoliendaIBP';

import MoliendaService from 'domain/services/MoliendaService';
import PLMoliendaIBPService from 'domain/services/PLMoliendaIBPService';
import ModalQuality from 'presentation/components/Weekly/Modal/ModalQuality';
import ModalProcess from 'presentation/components/Weekly/Modal/ModalProcess';
import ModalMolienda from 'presentation/components/Weekly/Modal/ModalMoliendaIBP';
import ModalCommercial from 'presentation/components/Weekly/Modal/ModalCommercial';
import ModalRestrictions from 'presentation/components/Weekly/Modal/ModalRestrictions';
import SeasonTableBox from './SeasonTableBox';

interface PreparedNetMargin {
	name: string,
	pv: number,
	module: string,
	tooltipData: PoToolTipData[],
	uv: number
}

interface PreparedBarchar {
	module: string,
	name: string,
	tooltipData: PoToolTipData[],
	pv: number
}

interface TableMolienda {
	date?: number,
	monthlyProfit?: number,
	monthlyValue: number,
	order: number,
	profit?: number,
	type: string,
	value: number
}

interface ModalInterface {
	month: number,
	setSavedMolienda: (b: boolean) => void,
	setVisibleCommercial: (b: boolean) => void,
	setVisibleMolienda: (b: boolean) => void,
	setVisibleProcess: (b: boolean) => void,
	setVisibleQuality: (b: boolean) => void,
	setVisibleRestrictions: (b: boolean) => void,
	visibleMolienda: boolean,
	visibleQuality: boolean,
	visibleCommercial: boolean,
	visibleProcess: boolean,
	visibleRestrictions: boolean
}
// x sacar de molienda IBP el month y de ahi sacar los dias.
// z es el value

const data01 = [
	{ x: 25, y: 2000, z: 10 },
	{ x: 25, y: 3000, z: 10 },
];

const CustomizedDot = props => {
	const {
		cx, cy,
	} = props;

	return (
		<svg fill="#6495ED" height={20} viewBox="0 0 100 100" width={20} x={cx - 10} y={cy - 10}>
			<circle cx="50" cy="25" r="25" />
		</svg>
	);
};

const WeeklyBody: React.FC<ModalInterface> = ({
	month, setSavedMolienda,
	setVisibleCommercial, setVisibleMolienda, setVisibleProcess,
	setVisibleQuality, setVisibleRestrictions,
	visibleMolienda, visibleQuality, visibleCommercial,
	visibleProcess, visibleRestrictions,
}) => {
	const [ maxValue, setMaxValue ] = useState(0);
	const [ minValue, setMinValue ] = useState(0);
	const [ api, contextHolder ] = notification.useNotification();
	const [ moliendas, setMoliendas ] = useState<MMolienda[]>([]);
	const [ moliendaIBP, setMoliendaIBP ] = useState<MPLMoliendaIBP>();
	const [ dataBarChar, setBarChar ] = useState<PreparedBarchar[]>([]);
	const [ dataNetMargin, setDataNetMargin ] = useState<PreparedNetMargin[]>([]);
	const [ tableData, setTableData ] = useState<TableMolienda[]>([]);
	const [ calculationName, setCalculationName ] = useState('');
	const [ reloadMoliendaIBP, setReloadMoliendaIBP ] = useState(false);

	const errorMessage = () => {
		notification.error({
			message: t('Custom_Messages.GeneralError'),
		});
	};
	const saveMessage = () => {
		notification.success({
			message: t('Modal.Save_Message'),
		});
	};

	const onFetch = async (): Promise<void> => {
		const moliendaService = new MoliendaService();

		const response = await moliendaService.GetMoliendas();
		if (response.data) {
			const data = (response.data as MMolienda[]);
			setMoliendas(data);
			prepareTableData(data);
		}
		fetchMoliendaIBP();
	};

	const fetchMoliendaIBP = async (): Promise<void> => {
		const IBPService = new PLMoliendaIBPService();
		const responseIBP = await IBPService.GetMoliendaIBP();
		if (responseIBP.data) {
			const data = responseIBP.data as MPLMoliendaIBP;
			setCalculationName(data.calculationName);
			data.calculationName = '';
			setMoliendaIBP(data);
		}
		setReloadMoliendaIBP(false);
	};

	const prepareTableData = (data:MMolienda[]) => {
		const moliendaTypes = [ 21, 20, 23, 22, 24 ];
		const filteredMolienda = data.filter(x => moliendaTypes.includes(x.moliendaType));
		const moliendaData: TableMolienda[] = filteredMolienda.map(item => ({
			date: item.timeStamp,
			monthlyProfit: item.monthlyProfit,
			monthlyValue: item.monthlyValue,
			order: item.moliendaType,
			profit: item.profit,
			type: EnumMoliendas[item.moliendaType],
			value: item.value,
		}));
		moliendaData.sort((a, b) => {
			const indexA = moliendaTypes.indexOf(Number(a.order));
			const indexB = moliendaTypes.indexOf(Number(b.order));
			return indexA - indexB;
		});
		setTableData(moliendaData);
	};

	const getTooltipElements = (item):PoToolTipData[] => ([
		{
			id: 1,
			line: 0,
			name: 'dailygriding',
			requid: 'none',
			value: item.value,
		},
		{
			id: 2,
			line: 0,
			name: 'netmargin',
			requid: 'none',
			value: item.profit,
		},
		{
			id: 3,
			line: 0,
			name: 'monthlygriding',
			requid: 'none',
			value: item.monthlyValue,
		},
		{
			id: 4,
			line: 0,
			name: 'modality',
			requid: 'none',
			value: item.moliendaType,
		},
		{
			id: 5,
			line: 0,
			name: 'monthlyprofit',
			requid: 'none',
			value: item.monthlyProfit,
		},
		{
			id: 6,
			line: 0,
			name: 'optimaldifference',
			requid: 'none',
			value: item.optimDifference,
		},
	]);

	const getTooltipElementsBarChar = (item):PoToolTipData[] => ([
		{
			id: 1,
			line: 0,
			name: 'Molienda Diaria (MT/d)',
			requid: 'none',
			value: item.value,
		},
		{
			id: 2,
			line: 0,
			name: 'Net Margin (USD/MT)',
			requid: 'none',
			value: item.profit,
		},
		{
			id: 3,
			line: 0,
			name: 'Molienda Mes (MT/mes)',
			requid: 'none',
			value: 0,
		},
		{
			id: 4,
			line: 0,
			name: 'Modalidad',
			requid: 'none',
			value: item.moliendaType,
		},
	]);

	const transformData = (type: string) => {
		const filtered = moliendas.filter(x => x.profit !== null);
		// eslint-disable-next-line prefer-spread
		setMaxValue(Math.max.apply(Math, filtered.map(o => o.value)));
		// eslint-disable-next-line prefer-spread
		setMinValue(Math.min.apply(Math, filtered.map(o => o.value)));

		if (type === 'NetMargin') {
			const datos = moliendas.sort((a, b) => a.value - b.value).map(item => ({
				module: 'Planning',
				name: item.value.toString(),
				pv: item.profit,
				tooltipData: getTooltipElements(item),
				uv: item.value,
			}));
			setDataNetMargin(datos);
		}

		setBarChar(
			filtered.filter(x => x.moliendaType !== 23).sort((a, b) => a.value - b.value).map(item => ({
				module: 'Planning',
				// eslint-disable-next-line no-nested-ternary
				name: item.moliendaType === 21 ? 'Maxima'
					: item.moliendaType === 22 ? 'Cotinua' : 'Optima',
				pv: item.monthlyProfit,
				tooltipData: getTooltipElementsBarChar(item),
			})),
		);
	};

	useEffect(() => {
		onFetch();
	}, []);

	useEffect(() => {
		if (reloadMoliendaIBP) {
			onFetch();
		}
	}, [ reloadMoliendaIBP ]);

	useEffect(() => {
		if (moliendas.length > 0) {
			transformData('NetMargin');
		}
	}, [ moliendas ]);

	return (
		<>
			{contextHolder}
			<Row className="flex-container">
				<div className="flex-item Left">
					<SeasonTableBox
						calculationName={calculationName}
						dataSource={tableData}
						date={moliendaIBP?.date}
						desiredTotalGrind={moliendaIBP?.desiredTotalGrind}
						month={month}
						season={moliendaIBP?.season}
					/>
				</div>
				<div className="flex-item Right">
					<ResponsiveContainer height="99%" width="99%">
						<ScatterChart
							height={400}
							margin={{
								bottom: 20,
								left: 20,
								right: 20,
								top: 20,
							}}
						>
							<CartesianGrid />
							<XAxis
								dataKey="x"
								domain={[ 0, 31 ]}
								name="stature"
								type="number"
							/>
							<YAxis
								dataKey="y"
								domain={[ 0, 5000 ]}
								name="weight"
								type="number"
							/>
							<ZAxis
								dataKey="z"
								name="score"
								range={[ 10, 300 ]}
								type="number"
								unit="km"
							/>
							<Tooltip cursor={{ strokeDasharray: '3 3' }} />
							<ReferenceLine
								label={{
									position: 'top',
									value: 'segm1',
								}}
								segment={[
									{
										x: 0,
										y: 2000,
									},
									{
										x: 24, // cantidad de dias del mes - SDT
										y: 2000,
									},
								]}
								stroke="orange"
								strokeWidth="5"
							/>
							<ReferenceLine
								stroke="grey"
								strokeWidth="2"
								x={24} // cantidad de dias del mes - SDT
							/>
							<ReferenceLine
								segment={[
									{
										x: 24, // cantidad de dias del mes - SDT
										y: 2000,
									},
									{
										x: 26, // max dias mes
										y: 2000,
									},
								]}
								stroke="red"
								strokeWidth="10"
							/>
							<Scatter data={data01} fill="blue" name="A school" shape="square" />
						</ScatterChart>
					</ResponsiveContainer>
				</div>
			</Row>
			<Row className="flex-container">
				<div className="flex-item Middle">
					<ResponsiveContainer height={400} width="100%">
						<LineChart
							data={dataNetMargin}
							height={300}
							margin={{
								bottom: 5,
								left: 20,
								right: 30,
								top: 5,
							}}
							width={500}
						>
							<CartesianGrid strokeDasharray="monotone" />
							<XAxis dataKey="name" domain={[ minValue, maxValue + 500 ]} />
							<YAxis />
							<Tooltip
								content={(
									<CustomTooltip
										t={t}
									/>
								)}
								// position={positiontooltip}
							/>
							<Line dataKey="pv" dot={<CustomizedDot />} isAnimationActive={false} stroke="#6495ED" strokeDasharray="4 4" />
						</LineChart>
					</ResponsiveContainer>
				</div>
				<div className="flex-item Middle">
					<ResponsiveContainer height="100%" width="100%">
						<BarChart
							data={dataBarChar}
							height={300}
							margin={{
								bottom: 5,
								left: 20,
								right: 30,
								top: 5,
							}}
							width={500}
						>
							<CartesianGrid strokeDasharray="3 3" />
							<XAxis dataKey="name" />
							<YAxis />
							<Tooltip
								content={(
									<CustomTooltip
										t={t}
									/>
								)}
								// position={positiontooltip}
							/>
							<Bar
								animationDuration={0}
								barSize={70}
								cursor="pointer"
								dataKey="pv"
								fill="#82ca9d"
								isAnimationActive={false}
								stackId="a"
							>
								{
									dataBarChar.map((item, index) => {
										if (item.name === 'Maxima') {
											return <Cell key={`${dataBarChar}_${item.name}`} fill="#5B8F22" />;
										}
										if (item.name === 'Cotinua') {
											return <Cell key={`${dataBarChar}_${item.name}`} fill="#ABAD23" />;
										}
										return <Cell key={`${dataBarChar}_${item.name}`} fill="#005C84" />;
									})
								}
								<LabelList dataKey="pv" />
							</Bar>
						</BarChart>
					</ResponsiveContainer>
				</div>
			</Row>
			{visibleMolienda && (
				<ModalMolienda
					errorMessage={errorMessage}
					moliendaIBP={moliendaIBP}
					month={month}
					saveMessage={saveMessage}
					setCalculationName={setCalculationName}
					setMoliendaIBP={setMoliendaIBP}
					setReloadMoliendaIBP={setReloadMoliendaIBP}
					setSavedMolienda={setSavedMolienda}
					setVisibleMolienda={setVisibleMolienda}
					visibleMolienda={visibleMolienda}
				/>
			)}
			{visibleQuality && (
				<ModalQuality
					errorMessage={errorMessage}
					month={month}
					saveMessage={saveMessage}
					setVisibleQuality={setVisibleQuality}
					visibleQuality={visibleQuality}
				/>
			)}
			{visibleCommercial && (
				<ModalCommercial
					errorMessage={errorMessage}
					month={month}
					saveMessage={saveMessage}
					setVisibleCommercial={setVisibleCommercial}
					visibleCommercial={visibleCommercial}
				/>
			)}
			{visibleProcess && (
				<ModalProcess
					errorMessage={errorMessage}
					month={month}
					saveMessage={saveMessage}
					setVisibleProcess={setVisibleProcess}
					visibleProcess={visibleProcess}
				/>
			)}
			{visibleRestrictions && (
				<ModalRestrictions
					errorMessage={errorMessage}
					month={month}
					saveMessage={saveMessage}
					setVisibleRestrictions={setVisibleRestrictions}
					visibleRestrictions={visibleRestrictions}
				/>
			)}
		</>
	);
};

export default WeeklyBody;