将一个数组从一个使用状态传递到另一个使用状态

我目前正试图弄清楚如何在两个不同的组件中把一个数组从一个useState对象传递到另一个。在我的第一个useState中，我有一个叫做imagesOriginal 的数组，它被动态地填充到各种不同的图像的文件路径中，就像下面这样：

[    "https://source.unsplash.com/WLUHO9A_xik/900x900",    "https://source.unsplash.com/R4K8S77qtwI/900x900",    "https://source.unsplash.com/jJGc21mEh8Q/900x900"]

在我的App.js ，我是这样构造的：

import React, { useCallback, useState } from 'react';
import ShowImage from './ShowImage.jsx';
import DropBox from './DropBox.js';

function App() {
    const [imagesOriginal, setImages] = useState([]);

    const onDrop = useCallback((acceptedFiles) => {
        acceptedFiles.map((file, index) => {
            const reader = new FileReader();

            reader.onload = function (e) {
                setImages((prevState) => [
                    ...prevState,
                    { id: index, src: e.target.result },
                ]);
            };

            reader.readAsDataURL(file);
            return file;
        });
    }, []);

    return (
        <div className="App">
            <div class="parent">
                <div>
                    <h3>Originals</h3>
                    <DropBox onDrop={onDrop} />
                    <ShowImage images={imagesOriginal}/>
                </div>
            </div>
        </div>
    );
}

export default App;

主要的问题出现在ShowImage.jsx ，我想把这个图像数组传递给另一个useState，因为我需要同时使用数组和setItems来给数组排序：

import React, { useState } from 'react';
import {
    DndContext,
    closestCorners,
    MouseSensor,
    TouchSensor,
    DragOverlay,
    useSensor,
    useSensors,
} from '@dnd-kit/core';
import "./ShowImage.css"
import {arrayMove, SortableContext} from '@dnd-kit/sortable';
import {SortablePhoto} from './SortablePhoto.jsx';

const ShowImage = ({images}) => {

    const [items, setItems] = useState([]);
    setItems([...images]);
    const [activeId, setActiveId] = useState(null);
    const sensors = useSensors(useSensor(MouseSensor), useSensor(TouchSensor));

    return(
        <div class="scroll">
            <DndContext
                sensors={sensors}
                collisionDetection={closestCorners}
                onDragStart={handleDragStart}
                onDragOver={handleDragOver}
                onDragEnd={handleDragEnd}
                onDragCancel={handleDragCancel}
            >
                <SortableContext items={items} strategy={() => {}}>
                    <div columns={1}
                        style={{
                        display: "grid",
                        gridAutoRows: `100px`,
                        gridGap: 10
                        }}
                    >
                        {items.map((url, index) => (
                            <SortablePhoto key={url.src} url={url.src} index={index}/>
                        ))}
                    </div>
                </SortableContext>
            </DndContext>
        </div>
    );

    function handleDragStart(event) {
        setActiveId(event.active.id);
    }
    
    function handleDragOver(event) {
        const {active, over} = event;
    
        if (active.id !== over.id) {
          setItems((items) => {
            const oldIndex = items.indexOf(active.id);
            const newIndex = items.indexOf(over.id);
    
            return arrayMove(items, oldIndex, newIndex);
          });
        }
    }
    
    function handleDragEnd(event) {
        setActiveId(null);
    }
    
    function handleDragCancel() {
        setActiveId(null);
    }
};

export default ShowImage;

我试着用setItems([...images]); 行来尝试传递新的项目，还有const [items, setItems] = useState(images); ，但它似乎从未更新过items 数组。我可能在做一些非常愚蠢的事情，但如果有任何帮助，我将非常感激。