help me optimize the following react typescript code

/* eslint-disable dot-notation */
/* eslint-disable no-restricted-globals */
/* eslint-disable sort-keys */
/* eslint-disable react/jsx-no-bind */
/* eslint-disable max-len */
/* eslint-disable func-names */
/* eslint-disable react/function-component-definition */
/* eslint-disable react/jsx-no-undef */
import Skeleton from 'antd/lib/skeleton';
import { t } from 'i18next';
import React, {
	useEffect,
	useState,
} from 'react';
import {
	Form, Input, Radio, RadioChangeEvent,
} from 'antd';
import { useAccount, useMsal } from '@azure/msal-react';
import { ExclamationCircleFilled } from '@ant-design/icons';

import '../../../styles/Restrictions.css';

import ModalCustom from '../../Modal/Modal';
import { MPLMoliendaIBP } from '../../../../domain/models/PLMoliendaIBP';
import PLMoliendaIBPService from '../../../../domain/services/PLMoliendaIBPService';

interface MoliendaInterface {
	month: number,
	errorMessage:() => void,
	saveMessage:() => void,
	setSavedMolienda: (b: boolean) => void,
	setVisibleMolienda: (b: boolean) => void,
	visibleMolienda: boolean
}

const ModalMolienda: React.FC<MoliendaInterface> = ({
	month, errorMessage, saveMessage,
	setSavedMolienda, setVisibleMolienda, visibleMolienda,
}) => {
	const [ saving, setSaving ] = useState(false);
	const [ isLoading, setIsLoading ] = useState(true);

	const { accounts } = useMsal();
	const [ form ] = Form.useForm();
	const userAccountInfo = useAccount(accounts[0]);
	const radioElements = [ 'High season', 'No demand' ];
	const [ moliendaIBP, setMoliendaIBP ] = useState<MPLMoliendaIBP>();
	const [ radioDefaultValue, setRadioDefaultValue ] = useState('High season');
	const [ validateDesireGrind, setvalidateDesireGrind ] = useState(false);
	const [ disableDesiredGrind, setDisableDesiredGrind ] = useState(true);

	const handleSaveResponse = (response: any, onSuccess: () => void, onError: () => void) => {
		if (response?.success) {
			setSavedMolienda(true);
			onSuccess();
		} else {
			onError();
		}
	};

	const cleanMoliendaIBP = () => {
		setVisibleMolienda(false);
		setMoliendaIBP(undefined);
		form.resetFields();
	};

	const onFetch = async (): Promise<void> => {
		try {
			const moliendaService = new PLMoliendaIBPService();
			const response = await moliendaService.GetMoliendaIBP();
			if (response.data) {
				const data = (response.data as MPLMoliendaIBP);
				setMoliendaIBP(data);
			}
			setIsLoading(false);
		} catch (e) {
			setVisibleMolienda(false);
			errorMessage();
		}
	};

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

	const handleSubmit = async values => {
		// pattern: '^([-]?[1-9][0-9]*|0)$',
		try {
			setSaving(true);
			const formData: MPLMoliendaIBP = {
				calculationName: values.calculationName,
				desiredTotalGrind: parseFloat(values.desiredTotalGrind),
				tempSoyGrind: parseFloat(values.tempSoyGrind),
				correctedGrindFactor: parseFloat(values.correctedGrindFactor),
				scheduledSDT: parseFloat(values.scheduledSDT),
				season: values.SeasonElement,
				month,
			};
			const moliendaIBPService = new PLMoliendaIBPService();
			formData.user = userAccountInfo?.username || '';
			const response = await moliendaIBPService.SaveMoliendaIBP(formData);

			handleSaveResponse(response, () => {
				cleanMoliendaIBP();
				saveMessage();
			}, errorMessage);
		} catch (e) {
			errorMessage();
		}
		setSaving(false);
	  };

	const handleRadioOnChange = (e: RadioChangeEvent) => {
		setRadioDefaultValue(e.target.value);

		if (e.target.value === 'High season') {
			setvalidateDesireGrind(false);
			return setDisableDesiredGrind(true);
		}
		setvalidateDesireGrind(true);
		return setDisableDesiredGrind(false);
	};

	return (
		<ModalCustom
			className="profitModal"
			onCancel={() => cleanMoliendaIBP()}
			onOk={form.submit}
			saving={saving}
			title="Molienda IBP"
			visible={visibleMolienda}
		>
			{ isLoading
				? <Skeleton loading paragraph={{ rows: 7 }} style={{ width: '450px' }} />
				: (
					<div className="container">
						<Form
							form={form}
							layout="vertical"
							name="dynamic_rule"
							onFinish={handleSubmit}
						>

							<Form.Item
								className="itemInputs"
								label="Nombre del calculo"
								name="calculationName"
								rules={[
									{
										required: true,
										whitespace: true,
									},
								]}
							>
								<div className="input-with-placeholders">
									<Input
										className="itemInputs"
										maxLength={30}
									/>
									<div className="right-placeholder">
										{form.getFieldError('calculationName').length > 0
											 && <ExclamationCircleFilled style={{ color: '#CD0D15', fontSize: '19px' }} />}
									</div>
								</div>
							</Form.Item>

							<Form.Item
								initialValue={radioDefaultValue}
								label=""
								name="SeasonElement"
								rules={[ { required: true } ]}
							>
								<Radio.Group onChange={handleRadioOnChange}>
									{radioElements.map(option => (
										<Radio key={option} value={option}>
											{option}
										</Radio>
									))}
								</Radio.Group>
							</Form.Item>

							<div className="group-container">
								<div className="group-inputs">
									<Form.Item
										className="itemInputs"
										label="Molienda Total Deseada"
										name="desiredTotalGrind"
										rules={[
											{
												required: true,
											},
											() => ({
												validator(_, value) {
													if (validateDesireGrind) {
														console.log('tengo que validar');
													}
													return Promise.resolve();
												},
											}),
										]}
									>
										<div className="input-with-placeholders">
											<Input
												className="itemInputs"
												disabled={disableDesiredGrind}
												maxLength={8}
											/>
											<div className={disableDesiredGrind ? 'right-placeholder-disabled' : 'right-placeholder'}>
												MT/Mes
											</div>
										</div>
									</Form.Item>

									<Form.Item
										className="itemInputs"
										label="Molienda Soja Temporal"
										name="tempSoyGrind"
										rules={[
											{
												required: true,
												whitespace: true,
											},
											() => ({
												validator(_, value) {
													if (isNaN(value) && value) {
														return Promise.reject(new Error('Please input a valid number'));
													}
													if (value > 100 || value < 0) {
														return Promise.reject(new Error(`${t('Modal.Range_Between')} 0 ${t('Modal.To')} 100`));
													}
													return Promise.resolve();
												},
											}),
										]}
									>
										<div className="input-with-placeholders">
											<Input
												className="itemInputs"
												maxLength={8}
											/>
											<div className="right-placeholder">
												{form.getFieldError('tempSoyGrind').length > 0
													? <ExclamationCircleFilled style={{ color: '#CD0D15', fontSize: '19px' }} />
													: '%'}
											</div>
										</div>
									</Form.Item>
								</div>
							</div>

							<div className="group-container">
								<div className="group-inputs">
									<Form.Item
										className="itemInputs"
										label="Factor molienda corregid"
										name="correctedGrindFactor"
										rules={[
											{
												required: true,
											},
											() => ({
												validator(_, value) {
													if (isNaN(value) && value) {
														return Promise.reject(new Error('Please input a valid number'));
													}
													if (value > 1.2 || value < 0.9) {
														return Promise.reject(new Error(`${t('Modal.Range_Between')} 0.9 ${t('Modal.To')} 1.2`));
													}
													return Promise.resolve();
												},
											}),
										]}
									>
										<div className="input-with-placeholders">
											<Input
												className="itemInputs"
												maxLength={8}
											/>
											<div className="right-placeholder">
												{form.getFieldError('correctedGrindFactor').length > 0
													? <ExclamationCircleFilled style={{ color: '#CD0D15', fontSize: '19px' }} />
													: '$/GJ'}
											</div>
										</div>
									</Form.Item>

									<Form.Item
										className="itemInputs"
										label="SDT Programadas"
										name="scheduledSDT"
										rules={[
											{
												required: true,
												whitespace: true,
											},
											() => ({
												validator(_, value) {
													if (isNaN(value) && value) {
														return Promise.reject(new Error('Please input a valid number'));
													}
													if (value > 744 || value < 0) {
														return Promise.reject(new Error(`${t('Modal.Range_Between')} 0 ${t('Modal.To')} 744`));
													}
													return Promise.resolve();
												},
											}),
										]}
									>
										<div className="input-with-placeholders">
											<Input
												className="itemInputs"
												maxLength={8}
											/>
											<div className="right-placeholder">
												{form.getFieldError('scheduledSDT').length > 0
													? <ExclamationCircleFilled style={{ color: '#CD0D15', fontSize: '19px' }} />
													: 'h'}
											</div>
										</div>
									</Form.Item>
								</div>
							</div>
						</Form>
					</div>
				)}
		</ModalCustom>

	);
};

export default ModalMolienda;