Untitled

in the below code the setModelValue and below piece are giving me sonar lint error, can you fix them?
 required: required
            ? typeof props.required === 'string' && !_.isEmpty(props.required)
                ? evalLangText(required, required)
                : ErrorMessages['required']
            : '',




import React from 'react';
import { useAppState, AppContext } from '@d-lift/core';
import { useFormContext } from 'react-hook-form';
import { InputOtp } from 'primereact/inputotp';
import PrimeWrapper from '../primeWrapper/primeWrapper';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { v4 as uuidv4 } from 'uuid';
import { get } from 'lodash';

const PrimeInputOtp = (props) => {
    const pageName = AppContext.pagedetails.getPageName();
    const context = AppContext.pagedetails.getRootContext();
    const readOnlyModeModel = context + '_' + pageName + '_' + 'readOnlyMode';
    const readOnlyMode = AppContext.model.getValue(readOnlyModeModel) || false;
    const {
        register,
        formState: { errors },
        setValue,
        trigger,
    } = useFormContext();
    const ErrorMessages = AppContext.globalErrorMessage;
    const {
        model,
        validations,
        onBlur,
        length,
        required,
        onChange,
        evalRefTableData,
        displayName,
        evalLangText,
        evalAria,
        defaultOption,
        noOptionsMessage,
        disabled,
        ...rest
    } = props;
    const [modelValue, setModelValue] = useAppState(props.model, props.value ? props.value : '');
    const { onChange: formOnChange, ...validationProps } = register(model, {
        minLength: {
            value: length,
            message: required
                ? typeof props.required === 'string' && !_.isEmpty(props.required)
                    ? evalLangText(required, required)
                    : ErrorMessages['required']
                : '',
        },
        required: required
            ? typeof props.required === 'string' && !_.isEmpty(props.required)
                ? evalLangText(required, required)
                : ErrorMessages['required']
            : '',
        onBlur: (e) => {
            if (onBlur) {
                onBlur(e);
            }
        },
    });

    return (
        (props.showIf !== undefined ? props.showIf : true) && (
            <span className="prime-input-text-wrapper">
                <div>
                    <label className={props.labelClassName}>
                        {' '}
                        {props.evalLangText(props.labelKey, props.label)}
                    </label>
                </div>
                <div
                    id={props.id ? props.id : uuidv4() + '_inputOtp'}
                    aria-label={props.evalLangText(props.ariaLabelKey, props.ariaLabel)}>
                    <InputOtp
                        value={modelValue}
                        {...rest}
                        disabled={disabled || readOnlyMode}
                        {...(validationProps && required)}
                        invalid={get(errors, model)?.message && true}
                        onChange={(e) => {
                            setValue(model, e.value);
                            if (onChange) onChange(e);
                            if (e.value.toString().trim().length === length) trigger(model);
                        }}></InputOtp>
                </div>
                {props.helperTextShowIf && (props.helperTextLabelKey || props.helperTextLabel) && (
                    <div>
                        <small
                            className={classNames(
                                'ux-input-helper-text',
                                props.helperTextClassName,
                            )}
                            // aria-live={helperTextAriaLive}
                            // id={`${id}_helptext`}
                        >
                            {props.evalLangText(props.helperTextLabelKey, props.helperTextLabel)}
                        </small>
                    </div>
                )}

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

PrimeInputOtp.propTypes = {
    /** Define/Generate a unique id for the component */
    id: PropTypes.string,
    /** Determines if the component is hidden or shown */
    showIf: PropTypes.bool,
    /** Accepts a Content Manager key and assigns the value to the label of the input */
    label: PropTypes.string,
    labelKey: PropTypes.string,
    /** List of CSS classnames to apply on label element  */
    labelClassName: PropTypes.string,
    /** Assistive component that conveys additional guidance about the field, such as how it will be used and what types in values should be provided. */
    helperTextLabel: PropTypes.string,
    /** Helper Text via Label Key for locale compatability */
    helperTextLabelKey: PropTypes.string,
    /** Helper text class name */
    helperTextClassName: PropTypes.string,
    /** Determines if helper text is hidden or shown */
    helperTextShowIf: PropTypes.bool,
    /** Specifies the current value of the component */
    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool]),
    /** Binds the component to a model (e.g., form state) */
    model: PropTypes.object,
    /** Defines validation rules for the component */
    validations: PropTypes.arrayOf(
        PropTypes.shape({
            rule: PropTypes.string.isRequired,
            message: PropTypes.string,
        }),
    ),
    /** Event handler triggered when the component loses focus */
    onBlur: PropTypes.func,
    /** Event handler triggered when the component's value changes */
    onChange: PropTypes.func,
    /** Label for accessibility purposes */
    ariaLabel: PropTypes.string,
    /**aria label key*/
    ariaLabelKey: PropTypes.string,
    /** Function to evaluate reference table data */
    evalRefTableData: PropTypes.func,
    /** Display name property for component identification */
    displayName: PropTypes.string,
    /** Function to evaluate localized text */
    evalLangText: PropTypes.func,
    /** Function to evaluate ARIA attributes */
    evalAria: PropTypes.func,
    /** Default option value or object */
    defaultOption: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
    /** Custom message displayed when no options are available */
    noOptionsMessage: PropTypes.func,
    /** Boolean flag to disable the component */
    disabled: PropTypes.bool,
    /** Determines if an input is required for Form validation */
    required: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
    /** Determines the length of OTP */
    length: PropTypes.string,
};

PrimeInputOtp.defaultProps = {};

export default PrimeWrapper(PrimeInputOtp);