Convert class components to functional hook in react js

Hi,

I can acheive this code in class component.but now i want this in functional hook.my fuctional component knowledge is low compared to class component.can anyone convert this class to functional.

constructor(props) {
    super(props);
    this.state={
      selectedOption: [] ,
      Dropdownlist:[],
     setSelectedValue:[],
        Details: [] ,
        ImageDisplay: '
    }
    this.submit = this.submit.bind(this);
    this.dropdown = this.dropdown.bind(this);
    this.handleChange = this.handleChange.bind(this);  
  }
getValues(apiValues) {  
  let previousValue = [];  
  let names = apiValues[0].profile_name.split(",");  
  let ids = apiValues[0].user_id.split(",");  
  let index = 0;  
  if (names.length === ids.length) {  
    names.forEach((item) => {  
      let data = { value: ids[index].toString(), label: item };  
      index++;  
      previousValue.push(data);  
    });  
  }  
  this.setState({ selectedOption: previousValue });  
}  
submit() {
  let user = JSON.parse(localStorage.getItem('user'));
  const accessToken = user;
  console.log(accessToken);
  fetch(url, {
          method: 'GET',
          headers: {
              "Content-type": "application/json",
              "Accept": "application/json",
              Authorization: "Bearer " + accessToken,
              "Access-Control-Allow-Headers": "Access-Control-Request-Headers "
          },
      }).then(response => response.json())
      .then(data => {
        this.getValues(data);   
          this.setState({
              Details: data
          });
})}
dropdown() {
  let user = JSON.parse(localStorage.getItem('user'));
  const accessToken = user;
  console.log(accessToken);
  fetch(url, {
          method: 'GET',
          headers: {
              "Content-type": "application/json",
              "Accept": "application/json",
              Authorization: "Bearer " + accessToken,
              "Access-Control-Allow-Headers": "Access-Control-Request-Headers "
          },
      }).then(response => response.json())
      .then(data => {
          this.setState({
              Dropdownlist: data
          });
          console.log("dropdown",data);
      });
}
handleChange(value, actionDetails) {  
  let items = [...this.state.selectedOption];  
  if (actionDetails.action === "remove-value") {  
    if (items) {  
      var index = -1;  
      items.forEach((item, i) => {  
        if (item.label === actionDetails.removedValue.label && item.value === actionDetails.removedValue.value) {  
          index = i;  
          return;  
        }  
      });  
      if (index > -1) {  
        items.splice(index, 1);  
      }  
    }  
  }  
  else {  
    items.push(actionDetails.option);  
  }  
  this.setState({ selectedOption: items });  
}   
componentDidMount() {
  window.addEventListener('load', this.submit);
  this.submit();
  window.addEventListener('load', this.dropdown);
  this.dropdown();
}
componentWillUnmount() {
  window.removeEventListener('load', this.submit);
  this.submit();
  window.addEventListener('load', this.dropdown);
  this.dropdown();
}
  render() { 
    const {Details,Dropdownlist,setSelectedValue} = this.state;
    let selectedValue = [];  
    let selectedLabel = [];  
    this.state.selectedOption && this.state.selectedOption.forEach((item) => {  
      selectedValue.push(item.value);  
      selectedLabel.push(item.label);  
    });  
    let unique = [...new Set(selectedLabel)]   
    console.log(unique);  
    let unique2 = [...new Set(selectedValue)]   
    console.log(unique2);  
    return (  
      

       ({ label: e.Name, value: e.Id}))}
      isMulti
      theme={theme => ({
      ...theme,
      colors: {
      ...theme.colors,
      neutral50: 'white', 
      },
      })}
      />

{Details.map(Det=>
)}
     
    );  
  }  
}