[Dúvida] Teste não funciona - o elemento esperado é diferente

Estou tendo um problema ao realizar o teste de um input. Segue abaixo os codigos dos arquivos.

Form.tsx

import { useRef, useState } from 'react'

const Form = () => {
    const [name, setName] = useState('')
    const inputRef = useRef<HTMLInputElement>(null)

    const addParticipant = (event: React.FormEvent<HTMLFormElement>) => {
        event.preventDefault()
        setName('')
        inputRef.current?.focus()
    }

    return (
        <form onSubmit={(event) => addParticipant(event)}>
            <input
                ref={inputRef}
                type='text'
                placeholder='Add participant'
                value={name}
                onChange={(event) => setName(event.target.value)}
            />
            <button disabled={true}>Add</button>
        </form>
    )
}

export default Form

Form.test.tsx

test('Add a participant when name is filled', () => {
    render(<Form />)

    const input = screen.getByPlaceholderText<HTMLInputElement>('Add participant')
    const btn = screen.getByRole('button')

    fireEvent.change(input, { target: { value: 'Ana Catarina' } })
    fireEvent.click(btn)

    expect(input).toHaveFocus()
    expect(input).toHaveValue('')
})

Segue abaixo o erro: