如何在react钩子中基于复选框选择来显示多个文本区？

import React, { useState } from 'react';

const MultiTextDisplay = () => {
  const [text1Visible, setText1Visible] = useState(false);
  const [text2Visible, setText2Visible] = useState(false);
  const [text3Visible, setText3Visible] = useState(false);

  const handleCheckboxChange = (event) => {
    const { name, checked } = event.target;

    if (name === 'text1') {
      setText1Visible(checked);
    } else if (name === 'text2') {
      setText2Visible(checked);
    } else if (name === 'text3') {
      setText3Visible(checked);
    }
  };

  return (
    <div>
      <label>
        <input type="checkbox" name="text1" onChange={handleCheckboxChange} />
        Show Text 1
      </label>
      <label>
        <input type="checkbox" name="text2" onChange={handleCheckboxChange} />
        Show Text 2
      </label>
      <label>
        <input type="checkbox" name="text3" onChange={handleCheckboxChange} />
        Show Text 3
      </label>

      {text1Visible && <div>Text 1</div>}
      {text2Visible && <div>Text 2</div>}
      {text3Visible && <div>Text 3</div>}
    </div>
  );
};

export default MultiTextDisplay;