clear(); method not working for React inputs

Most of the application we are developing is made with Angular but we are slowly transitioning to rebuilding it in ReactJS. clear() still works perfectly on Angular inputs but does absolutely nothing on React inputs

I wrote a reusable function long ago:

const clearAndSendKeys = async (input, text) => {
    await input.clear();
    await input.sendKeys(text);
};

The above function works perfectly well on angular elements, but the clear() part does not have any effect on pages made with React.
I also tried not using the function and just go with

await input.clear();
await input.sendKeys(text);

doesn't work either.
I will paste one of the inputs and the method I'm using to locate it

<div widths="equal" class="required field">
    <label>
        "Address"
        ::after
    </label>
    <div class="ui input">
        <input name="address1" placeholder type="text" value="fake address">
    </div>
</div>

Locator:
const addressInput = element(by.name('address1'));

UPDATE
I could work around this by using the backspace key in a loop. It's not the ideal method but it works (the ideal method would be clear() to work

    this.clearInput = async (input) => {
        const inputValue = await input.getAttribute('value');
        const valueLength = await inputValue.length;
        for (let i = 0; i < valueLength; i++) {
            await input.sendKeys(protractor.Key.BACK_SPACE);
        };
    };

I could work around this by using the backspace key in a loop. It's not the ideal method but it works (the ideal method would be clear() to work

this.clearInput = async (input) => {
    const inputValue = await input.getAttribute('value');
    const valueLength = await inputValue.length;
    for (let i = 0; i < valueLength; i++) {
        await input.sendKeys(protractor.Key.BACK_SPACE);
    };
};  

This is not the best solution but it does the job for now. Although I would love to know why the clear() method does not work in these react input components