У меня есть страница на которой выводятся все картинки из массива в котором сохранены url картинок. На этой странице есть иконка при нажатии на которую открывается модальное окно в котором нужно ввести url картинки, после чего при нажатии на кнопку сохранить введенный url добавляется в массив в котором хранятся все url. Проблема в том, что мне приходится в навбаре нажимать на ссылку которая открывает страницу в которой отображаются эти картинки из массива, чтобы новая картинка появилась на страницу, хотя все должно отображаться сразу же после добавления в массив

Это код страницы на которой выводятся все фотографии:

import React, { useState, useEffect } from 'react'
import './Photos.css'
import { AddPhoto } from '../components/AddPhoto'


export const Photo: React.FC = () => {
    const [photos, setPhotos] = useState<string[]>([]);

    useEffect(() => {
        localStorage.setItem('photos', JSON.stringify(photos))
    }, [photos])

    useEffect(() => {
        const saved = JSON.parse(localStorage.getItem('photos') || '[]')
        setPhotos(saved)
    }, [])

    return (<>
        <div className='addPhotoBtn' >
            <AddPhoto photos={photos} />
        </div>

        <div className="gallery" >
            {photos.map(item =>
                <div className="img-item" >
                    <img src={item} alt="" className="img" />
                </div>
            )}
        </div>
    </>)
}

и код модального окна в которой в качестве props передается сам массив который хранит url

import React, { useState } from 'react'
import { Button, Modal } from 'react-bootstrap'
import './AddPhoto.css'


type AddPhoto = {
    // addPhoto(url: string): void
    photos: string[],
}

export const AddPhoto: React.FC<AddPhoto> = ({ photos }) => {
    const [input, setInput] = useState<string>('')
    const [show, setShow] = useState(false);
    // const [file, setFile] = useState<string[]>([]) //сохранение url картинки

    const handleClose = () => {
        setShow(false);
    }
    const handleShow = () => setShow(true);

    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        setInput(e.target.value);
        console.log(input)
    }

    const UploadFile = () => {
        photos.push(input)
        // addPhoto(input);
        setInput('');
        setShow(false);
    }

    return (<>
        <svg onClick={handleShow} id="plus-icon" fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path d="M 11 2 L 11 11 L 2 11 L 2 13 L 11 13 L 11 22 L 13 22 L 13 13 L 22 13 L 22 11 L 13 11 L 13 2 Z" /></svg>

        <Modal show={show} onHide={handleClose}>
            <Modal.Header closeButton>
                <Modal.Title>Modal heading</Modal.Title>
            </Modal.Header>
            <div className="upload-icon">
                <div className="urlContainer">
                    <input type="text" className="urlInput" onChange={handleChange} />
                </div>
            </div>
            <Modal.Footer>
                <Button variant="secondary" onClick={handleClose}>
                    Close
                </Button>
                <Button variant="primary" onClick={UploadFile}>
                    Save Changes
                </Button>
            </Modal.Footer>
        </Modal>
    </>)
}