Untitled

update the below code so that when using primetristatechecbox we do not need to provide value & setvalue while using them.
<PrimeTriStateCheckbox
                        id="test-id"
                        model="iputVal1"
                        value={value}
                        onChange={(e) => setValue(e.value)}
                    />


manipulate code in the PrimeTriStateCheckbox so that value needs not to be passed in usage sample.





import React, { forwardRef } from 'react';
import { useForm, useFormContext } from 'react-hook-form';
import { useAppState } from '@d-lift/core';
import PropTypes from 'prop-types';
import { TriStateCheckbox } from 'primereact/tristatecheckbox';
import PrimeWrapper from '../primeWrapper/primeWrapper';
import { v4 as uuidv4 } from 'uuid';
import { get } from 'lodash';

const PrimeTriStateCheckbox = forwardRef((props, ref) => {
    const [modelValue, setModelValue] = useAppState(props.model, props.value ? props.value : null);
    const { id, model, validations, children, onBlur, onChange, ariaLabel, ariaLabelKey, ...rest } =
        props;

    const {
        register,
        formState: { errors },
        setValue,
        trigger,
    } = useFormContext();

    const { onChange: formOnChange, ...validationProps } = register(model, {
        validate: validations,
        onBlur: (e) => {
            if (onBlur) {
                onBlur(e);
            }
        },
    });

    return (
        (props.showIf !== undefined ? props.showIf : true) && (
            <>
                <TriStateCheckbox
                    id={id ? id : uuidv4() + '_triStateCheckbox'}
                    aria-label={props.evalLangText(ariaLabelKey, ariaLabel)}
                    onChange={(e) => {
                        setValue(model, e.value);
                        if (onChange) onChange(e);
                        trigger(model);
                    }}
                    invalid={get(errors, model)?.message && true}
                    {...validationProps}
                    {...rest}></TriStateCheckbox>

                {get(errors, model)?.message && (
                    <div
                        id={`errorMessageSpanForElementWithId_${props.id}`}
                        className="p-error"
                        // role="alert"
                        //is-error="true"
                    >
                        {get(errors, model)?.message}
                    </div>
                )}
            </>
        )
    );
});

PrimeTriStateCheckbox.propTypes = {
    /** Define a unique id for the component */
    id: PropTypes.string,
    /** Determines if the component is hidden or shown */
    showIf: PropTypes.bool,
    /**aria label key*/
    ariaLabelKey: PropTypes.string,
};

PrimeTriStateCheckbox.defaultProps = {};

export default PrimeWrapper(PrimeTriStateCheckbox);