I've a create-react-app project with custom hook like this:

// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
const useStagedUploads = () => {
    const [items, setItems] = useState<CustomFileWithPath[]>([]);
    const setUploadItems = (files: CustomFileWithPath[]) => setItems(files);

    return [items, setUploadItems] as const;
};

export default useStagedUploads;

I use it to push files to when browsed (using react-dropzone). Now in one of my other component, I use it like below *:

const [ items, setUploadItems ] = useStagedUploads();

    useEffect(() => {
        if (items) {
            onDrop(items);
            // eslint-disable-next-line @typescript-eslint/no-unsafe-return
            items.map((i) =>
                // eslint-disable-next-line @typescript-eslint/no-unsafe-return
                setUploadItems(
                    items.filter(
                        (items: CustomFileWithPath) => items.path !== i.path
                    )
                )
            );
        }
    }, [items]);

Now when upload is made like so (react-dropzone):

const { getInputProps, open, acceptedFiles } = useDropzone({
        noClick: true,
        noKeyboard: true,
    });

    useEffect(() => {
        if (acceptedFiles) {
            // eslint-disable-next-line @typescript-eslint/no-unsafe-return
            acceptedFiles.map((el) => stageUpload(el));
        }
    }, [acceptedFiles]);

... The former component (*) doesn't re-render (tried console, debugger, etc.) ie I don't receive items its empty "[]" array. Also doesn't react useEffect body.

Gave a try using simple primitive type it does re-render. Is it so that files couldn't be stored in react custom hooks or prevents re-render/ any serialization problem?

Thanks.

Edit:

As requested in comments, here's a stackblitz: https://stackblitz.com/edit/react-ts-w7swmv?embed=1&file=receive-files.ts