Validation and rendering of a field if a particular option of the select is selected (React-Hook-Form and React-Select)

Question

I need the user select the option "Promotions" in select, the field "Promotional price" is mandatory completion and the display his block.

Here’s how I’m trying to do it:

const { register, handleSubmit, errors, setValue, control, watch } = useForm<FormState>();

const [isLoadingCategories, setIsLoadingCategories] = useState(false);

const [categories, setCategories] = useState<Category[]>([]);

useEffect(() => {
    setIsLoadingCategories(true);
    makePrivateRequest({ url: '/categories' })
        .then(response => setCategories(response.data))
        .finally(() => setIsLoadingCategories(false));
}, []);

const [promotionalPriceField, setPromotionalPriceField] = useState("d-none");

const [validation, setValidation] = useState(false);

const selectedCategories = watch("categories");

const handleChange = () => {
    selectedCategories?.map(cat => {
        if (cat.id === 7) {
            setValidation(true);
            setPromotionalPriceField("d-block");
        }
    })
}

In the meantime, my job handleOnChange doesn’t work. What am I doing wrong? Can anyone help me with this?

NOTE: I am using React-Hook-Form