1nsayt

Во-первых - опечатка:

cildren

Во-вторых - зачем reduce? Достаточно map:

const copyTree = (tree, f) =>
  tree.map(n => {
    n = f instanceof Function ? f(n) : { ...n };
    if (n.children instanceof Array) {
      n.children = copyTree(n.children, f);
    }
    return n;
  });


const dataCopy = copyTree(data, ({ name: key, ...x }) => ({ key, ...x }));

const traversal = (arr, prevKey, key) => arr.map((o) => {
  const newObj = {
    ...o, 
    [key]: o[prevKey], 
    children: traversal(o.children, prevKey, key)
  }; 
  delete newObj[prevKey];
  return newObj;
});

const newArr = traversal(data, 'name', 'key');

P.S. ваш код не работает из-за опечатки в названии свойства в последнем объекте

const flat = arr =>
  (arr || []).reduce((acc, { children, ...n }) => {
    if (n.isExpanded || !children) {
      acc.push(n, ...flat(children));
    } else {
      acc.push({ ...n, children });
    }

    return acc;
  }, []);

UPD. Если вложенные уровни надо разворачивать несмотря на isExpanded: false у кого-то из предков уровнем выше родительского, то

const flat = arr =>
  (arr || []).reduce((acc, { children, ...n }) => {
    const flatChildren = flat(children);

    if (n.isExpanded || !children) {
      acc.push(n, ...flatChildren);
    } else {
      acc.push({ ...n, children: flatChildren });
    }

    return acc;
  }, []);

Градиентом можно, но псевдоэлементами будет больше контроля, хотя выбор всегда за вами.
Вот накидал небольшой пример