How to api call in onChange function on CheckBox field React js

I want to call a post api while changing the checkbox input? Right now i am doing this in the below patter but while Component re-render this api function got called? What to do, please? This is my Code:

 const [check, setCheck] = useState();
 
  async function fetchConfigApi() {
     try {
      const result = await axios.get(`/configuration/${system_id}`);
       const { status, data } = result;
       setConfigData(data);
       setCheck(data.self_service);
    } catch (e) {
      console.log("error response", e.response);
    }   }

  async function postSelfService() {
   try {
       const fd = new FormData();
      fd.append("self_service", check);
      const result = await axios.put(`/configuration/${system_id}`, fd);
     fetchConfigApi();
    } catch (e) {
      console.log("error response", e.response);
     }   }  const onSelfServiceChange = (e) => {
    setCheck(!check);   };

   useEffect(() => {
    fetchConfigApi();   }, []);
  useEffect(() => {   postSelfService();  }, [check]);

return (
    <div className={classes.subContainer}>
        <div>
          <FormControlLabel
            control={
               <Checkbox
                checked={check}
               onChange={onSelfServiceChange}
                 name="check"
               />
             }
             label="Enable Self Service"
           />    </div> )