当给定一个句子时，如何在react中通过迭代为包括空格在内的每个单词创建边界？

import React from "react";

const WordBoundary = ({ word }) => {
  return <span style={{ border: "1px solid black", padding: "5px" }}>{word}</span>;
};

export default WordBoundary;

import React from "react";
import WordBoundary from "./WordBoundary";

const Sentence = ({ sentence }) => {
  const words = sentence.split(" ");

  return (
    <div>
      {words.map((word, index) => (
        <WordBoundary key={index} word={word} />
      ))}
    </div>
  );
};

export default Sentence;

import React from "react";
import Sentence from "./Sentence";

const App = () => {
  const sentence = "This is a sample sentence";

  return (
    <div>
      <Sentence sentence={sentence} />
    </div>
  );
};

export default App;