How to handle button inside input on focus?

the problem is that when ever in focusing the password input the button show up but when i try to click the button its lose the focus on the input and then the button disappear.

<div className='input-wrapper'>
      <input
        onFocus={() => setShowButton(true)}
        onBlur={() => setShowButton(false)}
        title='password'
        type={
          type === 'password' && toggle ?
            "text" : "password"
        }
        {...props}
      />
      {showButton && <button
        type='button'
        className={type === 'password' ? "password" : ""}
        onClick={() => setToggle(!toggle)}
      >
        {toggle ? <ShowPasswordIcon /> : <HidePasswordIcon />}
      </button>}
    </div>

well i want that the button will be somehow included in the input focus (if that make sense somehow)

>Solution :

You can use the css pseudo-class :focus-within on the wrapper. When the wrapper on any of it’s children (button / input) is focused, the button would be visible:

.input-wrapper:not(:focus-within) > button {
  display: none;
}

<div class="input-wrapper"> <!-- className in JSX -->
  <input>
  
  <button>Toogle</button>
</div>