Как сохранить курсор в поле ввода React, которое обновляет состояние onChange?

Question

Каждый раз, когда я пытаюсь изменить слова в поле ввода, например, нажимая 3000, чтобы изменить его на 8080, всякий раз, когда я печатаю букву, курсор переводит меня в конец поля ввода. Я предполагаю, что это происходит потому, что мое состояние меняется всякий раз, когда я пытаюсь изменить входное значение, и по умолчанию нужно подвести курсор к концу значения. У вас есть предложения, как это исправить?

import React, { useState } from 'react';

function Example() {
  const [url, setUrl] = useState("http://localhost:3000");

  return (
    <div>
      <input type="text" value={url} onChange={(e) => setUtl(e.target.value)} />
    </div>
  );
}