Making dynamic react select component, not getting desired results,

I want to render a dynamic select/dropdown which I will fetch from an api as a template, I’m trying to pass on dynamic data to react select statement, still not getting exact response.
I want to display n number of dropdown, which be received from an api. Label of the dropdown will server as a question and options will be the answers.
Can someone help me figure out what shall be correct approach.
Below is my functional component for the same.
Thanks!

export const SurveyDropdown = () => {
  const [selectedSurvey, setselectedSurvey] = useState(); //default value

  function handleSelectChange(event) {
    setselectedSurvey(event.target.value);
  }
  console.log(selectedSurvey)
  const surveyData = [
    {
      id: 1,
      surveyQuestion: "Question One",
      type: "dropdown",
      option: ["optionOne", "optionTwo", "optionThree"],
    },
    {
      id: 2,
      surveyQuestion: "Question Two",
      type: "dropdown",
      option: ["optionOne", "optionTwo", "optionThree"],
    },
    {
      id: 3,
      surveyQuestion: "Question Three",
      type: "button",
      option: ["optionOne", "optionTwo", "optionThree"],
    },
  ];

  let optionTemplate = surveyData.map(surveyData => (
    <option value={surveyData.option} key={surveyData.surveyQuestion}>{surveyData.option.values}</option>
  ));

  console.log(optionTemplate);

  return (
    <>
      <FloatingLabel
        controlId="floatingSelect"
        label="This is question"
        value={selectedSurvey}
        onChange={handleSelectChange}
      >
        <Form.Select aria-label="Floating label select example">
          <option>{optionTemplate}</option>
        </Form.Select>
      </FloatingLabel>
    </>
  );
};