Questo è il mio file "import _ from 'lodashOverride';
import React, { ReactNode } from 'react';
import UUID from 'simply-uuid';
import { faCheckSquare, faSquare, SizeProp, IconDefinition } from '@shareSrc/Style/FontAwesomeSvg';
import styles from './arxCheckBox.module.scss';
import ArxLabel, { ArxLabelProps } from '@shareSrc/Components/ArxLabel/ArxLabel';
import { ArxIcon } from '@shareSrc/Components/ArxIcon/ArxIcon';
import CommonService from '@shareSrc/Services/CommonService';
import { faStop } from '@shareSrc/Style/FontAwesomeSvgSolid';
import { OmitTyped } from '@shareSrc/Types/CustomUtilityTypes';

export enum ArxCheckBoxType {
    Classic = 1,
    ThreeState = 2
}

export type ArxCheckBoxBooleanType = true | false | 'threeState';

/*PROPS*/

export type ArxCheckBoxPropsCommon = {
    /** Id Checkbox. If undefined, will be generate */
    id: string;
    /** Checkbox Description */
    description?: string;
    /** Checkbox tooltip */
    tooltip?: string;
    /** Size of the icon */
    size?: SizeProp;
    /** Settings of label */
    labelProps?: OmitTyped<ArxLabelProps, 'information'>;
    /** Disable component */
    disabled?: boolean;
    children?: ReactNode;
} & Pick<ArxLabelProps, 'information'>;

interface ComponentPropsClassic extends ArxCheckBoxPropsCommon {
    type?: ArxCheckBoxType.Classic;
    /** Event that invoke after selection/deselection */
    onChange(value: boolean, isShiftKeyPressed: boolean): boolean | void;
    /** Checkbox Value */
    isChecked: boolean;
    /** AlternativeIcons*/
    alternativeIcons?: { checked: IconDefinition; unchecked: IconDefinition };
}

interface ComponentPropsThreeState extends ArxCheckBoxPropsCommon {
    type?: ArxCheckBoxType.ThreeState;
    onChange(value: ArxCheckBoxBooleanType, isShiftKeyPressed: boolean): boolean | void;
    /** Checkbox Value */
    isChecked: ArxCheckBoxBooleanType;
    /** AlternativeIcons*/
    alternativeIcons?: { checked: IconDefinition; unchecked: IconDefinition; unchanged: IconDefinition };
}

type ComponentProps = ComponentPropsClassic | ComponentPropsThreeState;

/*STATE*/

interface ComponentStateClassic {
    type: ArxCheckBoxType.Classic;
    checked: boolean;
}

interface ComponentStateThreeState {
    type: ArxCheckBoxType.ThreeState;
    checked: ArxCheckBoxBooleanType;
}

type ComponentState = ComponentStateClassic | ComponentStateThreeState;

export class ArxCheckBox extends React.Component<ComponentProps, ComponentState> {
    genId;

    constructor(props: ComponentProps) {
        super(props);

        this.genId = this.props.id || UUID.generate().replace(/-/g, '');

        //è necessaria questa differenziazione per la tipizzazione, altrimenti il tipo di checked non viene calcolato correttamente
        this.state = undefined;
        if (this.isThreeState(this.props)) {
            let calculatedCheck: ArxCheckBoxBooleanType = this.props.isChecked;
            switch (this.props.isChecked) {
                case null:
                    calculatedCheck = 'threeState';
                    break;
                default:
                    calculatedCheck = calculatedCheck || false;
                    break;
            }

            this.state = {
                type: this.props.type,
                checked: calculatedCheck
            };
        } else {
            this.state = {
                type: this.props.type,
                checked: this.props.isChecked || false
            };
        }
    }

    isThreeState(currentProps: unknown): currentProps is ComponentPropsThreeState {
        return (
            currentProps &&
            currentProps.hasOwnProperty(CommonService.getProp<ComponentPropsThreeState>('type')) &&
            currentProps[CommonService.getProp<ComponentPropsThreeState>('type')] === ArxCheckBoxType.ThreeState
        );
    }

    internalChange = (e: React.MouseEvent, checked: boolean | ArxCheckBoxBooleanType): void => {
        e.stopPropagation();

        // TODO: rifattorizzare i vari if sotto. Farlo solo con una buona base di test

        // si può interrompere il cambio stato della checkbox tramite la funzione booleana dell'onChange.
        // si può passare una void, di default il valore della checkbox verrà cambiato
        const isShiftKeyPress = e.shiftKey;
        if (this.props.type === ArxCheckBoxType.ThreeState) {
            if (!_.isNil(this.props.onChange)) {
                if (this.props.onChange(checked as ArxCheckBoxBooleanType, isShiftKeyPress) !== false) {
                    this.setState({
                        checked: checked
                    });
                }
            }
        } else {
            if (!_.isNil(this.props.onChange)) {
                if (this.isThreeState(this.props)) {
                    if (this.props.onChange(checked as ArxCheckBoxBooleanType, isShiftKeyPress) !== false) {
                        this.setState({
                            checked: checked
                        });
                    }
                } else {
                    if (this.props.onChange(checked as boolean, isShiftKeyPress) !== false) {
                        this.setState({
                            checked: checked
                        });
                    }
                }
            } else {
                this.setState({
                    checked: checked
                });
            }
        }
    };

    componentDidUpdate(propsPrecedenti): void {
        if (this.props.isChecked !== propsPrecedenti.isChecked && this.props.isChecked !== this.state.checked) {
            this.setState({ checked: this.props.isChecked });
        }
    }

    iconChecked = this.props.alternativeIcons ? this.props.alternativeIcons.checked : faCheckSquare;
    iconUnchecked = this.props.alternativeIcons ? this.props.alternativeIcons.unchecked : faSquare;
    iconUnchanged = this.props.alternativeIcons && this.isThreeState(this.props) ? this.props.alternativeIcons.unchanged : faStop;
    getIconByValue = (value: boolean | ArxCheckBoxBooleanType): IconDefinition => {
        if (this.isThreeState(this.props)) {
            switch (value) {
                case false:
                    return this.iconUnchecked;
                case true:
                    return this.iconChecked;
                case 'threeState':
                default:
                    return this.iconUnchanged;
            }
        } else {
            return value ? this.iconChecked : this.iconUnchecked;
        }
    };

    onClickHandler = (e, value: boolean | ArxCheckBoxBooleanType): void => {
        if (this.isThreeState(this.props)) {
            switch (value) {
                case false:
                    this.internalChange(e, true);
                    break;
                case true:
                    this.internalChange(e, 'threeState');
                    break;
                case 'threeState':
                default:
                    this.internalChange(e, false);
            }
        } else {
            this.internalChange(e, !value);
        }
    };

    render(): JSX.Element {
        const { size, labelProps, disabled, description, tooltip, information } = this.props;
        const isChecked = this.state.checked;
        const tooltipText = tooltip ? tooltip : description;

        return (
            <div
                key={CommonService.generateKey(this.genId, 'container')}
                id={CommonService.generateKey(this.genId, 'arxCheckBoxContainer')}
                className={`${styles.container} ${disabled ? styles.container__disabled : ''}`}
                onClick={(e) => !disabled && this.onClickHandler(e, isChecked)}
                data-cy={'arxCheckBox_' + this.genId}
            >
                <ArxIcon
                    className={`${styles.check} ${disabled ? styles.check__disabled : ''}`}
                    key={CommonService.generateKey(this.genId, 'icon')}
                    icon={this.getIconByValue(isChecked)}
                    size={size}
                    tooltip={tooltipText}
                />
                <ArxLabel
                    id={CommonService.generateKey(this.genId, 'label')}
                    type="normal"
                    tooltip={tooltipText}
                    value={description}
                    disabled={disabled}
                    information={information}
                    {...(!_.isNil(labelProps) ? labelProps : {})}
                ></ArxLabel>
            </div>
        );
    }
}
"

ho questo errore "[{
	"resource": "/C:/Git/ArxivarClienti/Euroitalia/EuroItalia.MiddlewarePortal/src/share/src/Components/ArxCheckBox/ArxCheckBox.tsx",
	"owner": "typescript",
	"code": "2322",
	"severity": 8,
	"message": "Type '{ type: ArxCheckBoxType; checked: boolean | \"threeState\"; }' is not assignable to type 'Readonly<ComponentState>'.\n  Type '{ type: ArxCheckBoxType; checked: boolean | \"threeState\"; }' is not assignable to type 'Readonly<ComponentStateThreeState>'.\n    Types of property 'type' are incompatible.\n      Type 'ArxCheckBoxType' is not assignable to type 'ArxCheckBoxType.ThreeState'.\n        Type 'ArxCheckBoxType.Classic' is not assignable to type 'ArxCheckBoxType.ThreeState'.",
	"source": "ts",
	"startLineNumber": 98,
	"startColumn": 13,
	"endLineNumber": 98,
	"endColumn": 23
}]"