I have a public component(a common region select component that should be reused in many UI page), now I define a function to return the element in a public function, this function which return the public region select component looks like this:

export const LazyOptions = (this) => {
  const optionLists =regionDict.REGION.map(function(item){
    return ({
      value: item,
      label: item,
      isLeaf: false,
    });
  });
  const [options, setOptions] = React.useState(optionLists);
  const onChange = (value, selectedOptions) => {
    var unique = value.filter(onlyUnique);
    this.setState({
      formValues:{
        province: unique.toString()
      }
    });
  };

  const loadData = selectedOptions => {
    const targetOption = selectedOptions[selectedOptions.length - 1];
    targetOption.loading = true;

    // load options lazily
    setTimeout(() => {
      targetOption.loading = false;
      targetOption.children =regionDict.CITY[`${targetOption.label}`].map(function(itemc){
        return ({
          label: itemc,
          value: itemc,
        });
      });
      setOptions([...options]);
    }, 100);
  };

  return <Cascader options={options} loadData={loadData} onChange={onChange} changeOnSelect style={{ width: 120 }}/>;
};

this function invoke setState which always execute in the UI component, I can not apply this function because the public method did not own this. is it possible to pass the this to the function and execute setState method? or what should I do to apply the setState correctly in the public function? I invoke the function like this:

LazyOptions(this)

seems could not work.