Correct way to select the Selector

In my TestCafe script I try to select 3 inputs. They are:

<div>
<div class="InputHeaderContainer cl-input-header-container">
<div class="cl-input-header-text">Korpushöhe (ohne Sockel)</div>
<input class="InputField cl-input cl-input-header" type="number" value="600">
<div class="clear"></div>
</div>
</div>

<div>
<div class="InputHeaderContainer cl-input-header-container">
<div class="cl-input-header-text">Korpusbreite</div>
<input class="InputField cl-input cl-input-header" type="number" value="600">
<div class="clear"></div>
</div>
</div>

<div>
<div class="InputHeaderContainer cl-input-header-container">
<div class="cl-input-header-text">Korpusbreite</div>
<input class="InputField cl-input cl-input-header" type="number" value="600">
<div class="clear"></div>
</div>
</div>

I used in my script:

await t
    .typeText(Selector('div').withText('Korpushöhe').find('input'), '1200', {replace: true})
    .typeText(Selector('div').withText('Korpusbreite').find('input'), '1400', {replace: true})
    .typeText(Selector('div').withText('Korpustiefe').find('input'), '400', {replace: true});

But if I run this script, the Browser will type the text 3 times into the first field. This is confusing. What I did wrong?