Element was found but always return element not interactable

i am trying to click a button or radio button or even a div element its always return error like this

element not interactable
    (Session info: chrome=105.0.5195.127) (Selenium::WebDriver::Error::ElementNotInteractableError)

html

<div data-v-21a4ea96="" class="tw-w-full tw-flex tw-flex-row tw-items-center tw-justify-between tw-gap-[10px]" xpath="1">
    <div data-v-21a4ea96="" class="tw-w-full tw-flex tw-flex-row tw-items-center">
        <input data-v-21a4ea96="" type="radio" id="laki-laki" name="gender" value="L" checked="checked" class="tw-mr-[10px]">
        <label data-v-21a4ea96="" for="laki-laki">Laki-Laki</label>
    </div>
    <div data-v-21a4ea96="" class="tw-w-full tw-flex tw-flex-row tw-items-center">
        <input data-v-21a4ea96="" type="radio" id="perempuan" name="gender" value="P" checked="checked" class="tw-mr-[10px]">
        <label data-v-21a4ea96="" for="perempuan">Perempuan</label>
    </div>
</div>

step definition

find(:xpath, "//input[@id='perempuan']").click

#or

find(:xpath, "//label[contains(text(),'Perempuan')]").click

#or

choose('Perempuan')

i am trying with these approach but it always return element not interactable i am also adding sleep(60) but nothing changes

how to fix this? any answer will be appreciate.

thanks in advance.

sorry for my bad english