The prop is set up in some other component (months calendar), and user live months selection triggers a new api fetch for this component. Both components are hosted by a Home component as children.
The option 2 works fine, no error or warning whatsoever. However, when I use the option 1 then I get this warning:
React Hook useEffect has a missing dependency: ‘getComponentData’. Either include it or remove the dependency array. Note the function name, not the function dependent parameter name.

Just curious:
What is the the principal difference between these two options? I use props value in both functions anyway; directly (option 1) and directly, inside the async function (option 2). What does the async method do the trick?

const [componentData, setComponentData] = useState([]);

option 1:

useEffect(() => {
  getComponentData(props.calendarInput);
}, [props.calendarInput]);

async function getComponentData(sm) {
  const data = await api.getUtilityServicePays(sm);
  setComponentData(data);
}

option 2:

useEffect(() => {
  async function getComponentData() {
    const data = await api.getUtilityServicePays(props.calendarInput);
    setComponentData(data);
  }
  getComponentData();
}, [props.calendarInput]);