React- pass {selected, setSelected} as a object props to component?

Question

I'm learning how to do dropdown menu from a tutorial.

There are some parts that I don't know..

1. why pass {selected, setSelected} as a object props to Dropdown component instead of using selected, setSletected directly? I've tried and it throws an error.
2. at this part

{options.map((option) => (
            <div
              onClick={(e) => {
                setSelected(option);
              }}
            > 

the tutorial initially used onClick={(e) => {setSelected(e.target.textContent);}} why have to change e.target.textContent into option?

how do program know which item is selected exactly by option without using e.target.textContent?

function App() {
  const [selected, setSelected] = React.useState("Choose One");
  return (
    <div>
      {/* custom dropdown menu */}
      <Dropdown selected={selected} setSelected={setSelected} />
      {selected}
    </div>
  );
}

function Dropdown({ selected, setSelected }) {
  const [isActive, setIsActive] = React.useState(false);
  const options = ["React", "Vue", "Angular"];
  return (
    <div onClick={(e) => setIsActive(!isActive)}>
      {isActive && (
        <div>
          {options.map((option) => (
            <div
              onClick={(e) => {
                setSelected(option);
              }}
            ></div>
          ))}
        </div>
      )}
    </div>
  );
}
ReactDOM.render(<App/>, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>