I have an array of files, that you can fill via a type="file" tag. Data is then displayed to the user, where the user himself is able to click a little cross at the right side of the uploaded files name.

Adding data to the array state works with a perfect update. But if data is removed, and I can see the state being an empty array by logging its value to the console, the displayed data is not updated.

const [pfps, setPfps] = useState([])


function handleSetPfps(e) {
    setPfps([...pfps, e.target.files[0]])
}

async function removeFile(i) {
    const newPfps = pfps
    await newPfps.splice(i, 1)
    setPfps(newPfps)
}

And this is the function that shows the files names, that still shows the files names even after they have been removed from the state.

{pfps?.map((pfp, index) => (
    <div className='bg-slate-200 p-1 m-1 block'>
        {short(pfp.name)}
        <XIcon className='w-4 h-4 inline ml-3 mr-1' onClick={async () => await removeFile(index)} />
    </div>
))}

How can I solve this error and see the actual change, when I remove things from the state?