ReactJs hook that joins an Array of Elements with a separating Element.

useArrayJoin.tsx

export const useArrayJoin = (
    arr: Array<JSX.Element>,
    join: (key: number) => JSX.Element
) => {
    return useMemo(() => {
        return arr.reduce(
            (acc: null | Array<JSX.Element>, next: JSX.Element, key) =>
                acc === null ? [next] : [...acc, join(key), next],
            null
        );
    }, [arr, join]);
};