focus input with react hooks

I've been trying to to get useRef to work and I can't figure why it doesn't.

I have an controlled Input component and a form that wraps few of these Inputs. once submitted the input is added to as a line in a list and a new form is at the bottom of all lines submitted so far.

after submitting in the new form the last input is focued. how I can get make it focused on the first input? I tried to use useRef and useEffects the will focus everytime it renders, but it didn't work. I'm not even sure if I need to use React.forwardRef since the html input tag is wrapped by Input component.

another thing (that I'm not sure if it is possible): how I can make it focus the next input once filled (I already enforce 1 char per input, but not sure how to jump to next input on change). the amount of inputs is not constant, and it is impossible to use hooks in a loop.

here is the input component:

function Input({ value, handleChange}) {
    let props = {
        value,
        onChange: (e) => handleChange(e.target.value[e.target.value.length - 1]),
    }
    return <input {...props}/>
}

and what the Form renders:

<form onSubmit={(e) => sendForm(e)}>
    {values.map((i, idx) => {
        let props = {
            key: idx,
            value: values[idx],
            handleChange: updateValue(idx),
        }
        return <Input {...props} />
    }
    )}
    <input type="submit" value="Submit" />
</form>

Thanks.