How to simulate entering input text within reac-select creatable using capybara?

Question

I've used react-select AsyncCreatable to make Search Prompt for records. Now I want to write some integration tests for it using Capybara. I don't know how to do it though. I've tried clicking the element and telling capybara to fill_in('node', with: 'text') but no luck actually.

I'm using Selenium with :headless_chrome. I'm getting a Selenium::WebDriver::Error::ElementNotInteractableError: element not interactable

I've also tried set find('#people_search_form_name').set('Vini'). That didn't break, but didn't add the text to the input field.

Does anyone have any tip on how to achieve it?

Here's the html generated

<div class=" css-dyr6gj-container" id="people_search_form_name">
  <div class="people_search_form_name__control css-yk16xz-control">
    <div class="people_search_form_name__value-container css-g1d714-ValueContainer">
      <div class="people_search_form_name__placeholder css-1wa3eu0-placeholder">Find people</div>
        <div class="css-b8ldur-Input">
          <div class="people_search_form_name__input" style="display: inline-block;">
            <input autocapitalize="none" autocomplete="off" autocorrect="off" id="react-select-3-input" spellcheck="false" tabindex="0" type="text" aria-autocomplete="list" aria-label="Find people" value="" style="box-sizing: content-box; width: 2px; background: 0px center; border: 0px; font-size: inherit; opacity: 1; outline: 0px; padding: 0px; color: inherit;">
            <div style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-size: 12.8px; font-family: FiraSans, -apple-system, system-ui, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; font-weight: 400; font-style: normal; letter-spacing: normal; text-transform: none;">
            </div>
          </div>
        </div> 
      </div>
      <div class="people_search_form_name__indicators css-1hb7zxy-IndicatorsContainer">
      </div>
    </div>
  <input name="people_search_form[name]" type="hidden" value="">
</div>

I've learned one way to achieve this is by using send_keys. Something like

      find('.addresses_search_form_name__input').send_keys('Margate road')

But unfortunately that doesn't work either.

Minitest::UnexpectedError: Selenium::WebDriver::Error::ElementNotInteractableError: element not interactable

(Session info: headless chrome=85.0.4183.121)