Why are my keys on my components not considered unique?

Question

I have made a function that maps through the number of "steps" input, I think I have given each component unique keys but the console says otherwise. why is this? Another issue I'm having with this project is the title field doesn't update correctly but I can't work out why. Here is my code.

export default function App() {
  //number of steps required
  const [numberOfSteps, setNumberOfSteps] = useState(0);

  //number of steps to array to map through
  const stepsMap = Array.apply(
    null,
    Array(numberOfSteps).fill({ title: "", body: "" })
  );

  //steps array to object
  let stepsObject = { ...stepsMap };

  //updates title text
  const updateTileArray = (index, titleEventData) => {
    const stepsObjectData = { ...stepsObject };
    stepsObject = {
      ...stepsObjectData,
      [index]: { ...stepsObjectData[index], title: titleEventData }
    };
  };

  //updates quill text body
  const updateRichTextArray = (index, richTextEventData) => {
    const stepsObjectData = { ...stepsObject };
    stepsObject = {
      ...stepsObjectData,
      [index]: { ...stepsObjectData[index], body: richTextEventData }
    };
  };

  return (
    <div className="App">
      <TextField
        type="number"
        label="Number of steps"
        value={numberOfSteps}
        InputProps={{ inputProps: { min: 0 } }}
        onChange={(e) => setNumberOfSteps(Number(e.target.value))}
      />
      {stepsMap.map((_, index) => (
        <>
          <Typography key={"heading" + index}>Step: {index + 1}</Typography>
          <TextField
            key={"title" + index}
            type="text"
            label="Title"
            value={stepsObject[index]?.title}
            onChange={(titleEventData) =>
              updateTileArray(index, titleEventData.target.value)
            }
          />
          <ReactQuill
            key={"quill" + index}
            theme="snow"
            value={stepsObject[index]?.body}
            onChange={(richTextEventData) =>
              updateRichTextArray(index, richTextEventData)
            }
          />
        </>
      ))}
    </div>
  );
}

Code Sandbox

Answer 1

The key should be on the fragment, you can do it like this:

{stepsMap.map((_, index) => (
        <React.Fragment key={index}>
          <Typography>Step: {index + 1}</Typography>
          <TextField
            type="text"
            label="Title"
            value={stepsObject[index]?.title}
            onChange={(titleEventData) =>
              updateTileArray(index, titleEventData.target.value)
            }
          />
          <ReactQuill
            theme="snow"
            value={stepsObject[index]?.body}
            onChange={(richTextEventData) =>
              updateRichTextArray(index, richTextEventData)
            }
          />
        </React.Fragment>
      ))}

Answer 2

First you should use <React.Fragment> to pass key prop. Second your code has two problems regarding title.

1. stepsObject should be a state variable that will handle re-rendering of the component.
2. You should concatenate the previous value of title with latest value in updateTileArray function.