function addKeyPrefix(element, prefix) {
  if (Array.isArray(element)) {
    return element.map((child, index) =>
      addKeyPrefix(child, `${prefix}.${index}`)
    );
  } else if (typeof element === "object" && element !== null) {
    const newProps = {};
    for (const key in element) {
      if (key === "key") {
        newProps[key] = `${prefix}.${element[key]}`;
      } else {
        newProps[key] = addKeyPrefix(element[key], prefix);
      }
    }
    return { ...element, ...newProps };
  }
  return element;
}

const App = () => {
  const data = [
    { id: 1, name: "John" },
    { id: 2, name: "Jane" },
    { id: 3, name: "Bob" }
  ];

  const prefixedData = addKeyPrefix(data, "customPrefix");

  return (
    <div>
      {prefixedData.map(item => (
        <div key={item.key}>{item.name}</div>
      ))}
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));