React Bootstrap DropDown Select

dropdownSelect.js

import React from "react";
// react boostrap
import Dropdown from "react-bootstrap/Dropdown";
// fontawesome
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

function DropDownSelect({ options, value, ...props }) {
  const dropdown_options = options.map((item, index) => {
    return (
      <Dropdown.Item eventKey={item.value} key={index}>
        <FontAwesomeIcon icon={item.icon} /> {item.name}
      </Dropdown.Item>
    );
  });

  function getRenderFromOptions(value) {
    const selected_option = options.filter((item, index) => {
      return item.value === value;
    });

    return selected_option.length > 0 ? (
      <span>
        <FontAwesomeIcon icon={selected_option[0].icon} />{" "}
        {selected_option[0].name}
      </span>
    ) : (
      "Please Select From the Options"
    );
  }

  return (
    <Dropdown {...props}>
      <Dropdown.Toggle variant="secondary" block style={{ textAlign: "left" }}>
        {getRenderFromOptions(value)}
      </Dropdown.Toggle>
      <Dropdown.Menu>{dropdown_options}</Dropdown.Menu>
    </Dropdown>
  );
}

export default DropDownSelect;

Main.js

function main(){
  const [values, setValues] = React.useState({
    media_type: ""
  });
  
  const options = [
    {name: "Facebook", value: "FACEBOOK", icon: faFacebook},
    {name: "LinkedIn", value: "LINKEDIN", icon: faLinkedIn},
    {name: "Instagram", value: "INSTAGRAM", icon: faInstagram},
  ]
  
  function handleItemSelect(event_value) {
    setValues({ ...values, media_type: event_value });
  }

  return(
    <DropdownSelect 
      value={values.media_type}
      onSelect={handleItemSelect}
      options={options}
    />
  )
}