useRef on Form.Control inside a FloatingLabel not firing focus()

When i click on top of the form anywhere, i expect the input to be focused, yet it doesn't, but if i try to log the ref.current and see if it returns anything, it actually returns the input object, so it's working good just as far, but the focus won't fire for some reason, unless i take the Form.Control out of the FLoatingLabel.

const ref = useRef(null);

<Form onClick={() => ref.current.focus()}>
    <Form.Group controlId='_searchControl' className={`_formGroup _searchGroup ${_searchFocused ? 'focused' : ''}`}>
       <FloatingLabel
           controlId='_searchControl'
           label='Search.'
           className='_formLabel'
       >
           <Form.Control placeholder='Search.' autoComplete='new-password' type='text' className='_formControl border border-0 rounded-0' name='_searchControl' value={_searchValue} onChange={(event) => setSearchValue(event.target.value)} onFocus={() => setSearchFocused(true)} onBlur={() => setSearchFocused(false)} ref={ref} />
       </FloatingLabel>
   </Form.Group>
</Form>

i'm assuming the focus() is not working because the input is only created dynamically inside a yet to exist div wrapping the label, because as i have mentioned, once i take the Form.Control to outside the FLoatingLabel, the focus works just fine.