I have a state in parent component which i want to update it from onClick in the child component, but it is not updating what is wrong here?

Another Problem
I want to show a popup when the user click in one of the radio button. And i have different popup messages for each radio button. I am using the index to show this popup. But how can i tell the child component to show this clicked popup?

Parent

 const [showPopup, setShowPopup] = useState(false);
  const [activeIndex, setActiveIndex] = useState(-1);

 return (
    <div>
      {options?.map((option,index) => (
        <RadioBtn
          key={index}
          onChange={radioButtonChangeHandler}
          label={option.label}
          value={option.value}
          showPopup={showPopup}
         activeIndex={activeIndex}
          onClick={() => {
            setShowPopup(curr => !curr);
            setActiveIndex(index);
          }}
        />
      ))}
    </div>
  );

Child

const popupMessage = (
        <div>{popupMsg}</div>
  );
       <div>
            <input
              ref={iRef => {
                ref(iRef);
                inputRef.current = iRef;
              }}
              id={id}
              type="radio"
              checked={isChecked}
              onClick={props.onClick}
              {...props}
              {...rest}
            />
            <label htmlFor={id} >
              {label}
            </label>
          </div>

>Solution :

You need to call the setShowPopup properly.

If you want to toggle the state

onClick={() => setShowPopup((curr)=> !curr)}

If you just want to set it to true

onClick={() => setShowPopup(true)}