Поле ввода в модальном режиме response bootstrap повторно отображает модальное при каждом нажатии клавиши

Цель: я пытаюсь создать модальную форму, которая открывается при нажатии на пустой контейнер div, где я могу затем ввести URL-адрес изображения в форму в модальном окне. Эта ссылка затем заполнит тег img в контейнере div.

Проблема: после первого нажатия клавиши модальное окно обновляется, и мне нужно щелкнуть поле ввода, чтобы продолжить. Я могу вводить только одну букву за раз. Я не думаю, что для этой проблемы требуется e.preventDefault, потому что это происходит до того, как я нажму «Отправить». также я пробовал использовать его в качестве второго аргумента в моем методе onchange на случай, если он сработает.

Проблема возникает только после того, как я установил значение поля ввода в состояние, и событие onChange включено.

Это ошибка, которую я получил в терминале:

findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-find-node

что привело меня к вопросу при переполнении стека, где сценарий был аналогичным, но пока перечисленные решения не работали. Но главный вывод заключается в том, что это может быть проблема с изменением состояния, вызывающая повторную визуализацию модального окна. Я начал попытки реализовать useRef, но пока безуспешно.

редактировать: после изучения useRef я понял, что моя попытка была неудачной, но у меня было мало времени, и я пытался напечатать это, пока учился его использовать.

второе редактирование: прочитав кучу той ночью и на следующее утро, я нашел два решения, useRef и FormData, последний подход, с которым я еще не добился успеха, но я считаю, что он работает при правильном использовании. Я обновил свой код ниже, чтобы включить в него свой прогресс. Еще не придумал, как обновлять дом крючками.

третье изменение: я успешно обновил базу данных, но dom обновляется только после обновления. Кроме того, я намеревался обновить только один div, но я обновил все 50. Я думаю, это из-за моего размещения моей формы. Итак, я пытаюсь научиться использовать forwardRef и useImparetiveHandle, чтобы я мог обновить состояние, в котором оно хранится в родительском компоненте, и передать несколько ссылок вниз.

Я думаю, также важно отметить, что прорывом для меня стало получение доступа к данным useRef, которые я подтвердил, добавив alert(imageRef.current.value) в метод handleSubmit.

Ниже приведен фрагмент моего кода, где разные подходы включают области, которые закомментированы.

///INITIAL APPROACH
 const textInput = useRef(null) 
            const [url, setUrl] = useState("")
            const handleChange = (urlData) => {
                // e.preventDefault()
                // console.log(e.target.value)
                // setUrl(prevUrl => prevUrl)
                // setUrl(prevUrl => prevUrl + e.target.value)
                setUrl(urlData)
                // debugger            
                
                // setUrl(url + e.target.value)
            }


const ModalForm = () => {
            return(
                <Modal 
                    // animation={false}
                    show={openModalForm} 
                    onHide={modalToggle}
                    url={url}
                    // data-keyboard="false"
                     data-backdrop="static"
                >
                    <Modal.Header>
                        <button  
                        className="modalBtn"  
                        onClick={modalToggle}
                        >X</button>

                    </Modal.Header>
                    <form onSubmit={addPhoto}  >
                        <input 
                        ref={textInput}
                        type="text"
                        value={url}
                        // onChange={console.log(url)}
                        onChange={(e) => {setUrl(e.target.value)}}
                        // onChange={handleChange}
                        // onChange={(e) => handleChange(e)}
                        // onChange={(e) => handleChange(e, e.target.value)}
                        />
                    </form>
                        <p></p>

                </Modal>)}
/// UPDATED APPROACH

const imageRef = useRef()
                const detailRef = useRef()
                const [url, setUrl] = useState("")
                const [details, setDetails] = useState("")
                const handleSubmit = (e) => {
                    e.preventDefault()
                    console.log(e)
                    fetch(`http://localhost:3000/photos/${photo.id}`, {
                        method: 'PATCH',
                        headers: {
                            "Content-Type": "application/json"
                        },
                        body: JSON.stringify({
                            image: imageRef.current.value,
                            details: detailRef.current.value 
                    })
                })
                    .then(res => res.json())
                    .then(photoObj =>
                        console.log(photoObj)
                        // (updatedBox) => {
                        //     setUrl(photo.image)
                        //     setDetails(photo.details)
                        // }
                    )
                }


 <form 
                    ref={form}
                    onSubmit={handleSubmit}
                    >
                        
                        <input 
                        type="text"
                        name="image"
                        placeholder="url"
                        ref={imageRef}
                        />
                        <input
                        type="text"
                        name="details"
                        placeholder="details"
                        ref={detailRef}
                        />
                        <button type="submit">ENTER</button>
                    </form>