Getting setReloadTable is not a function for my state variable

Question

I have a function which I am executing on a button click. It uses async and await to interact with APIs from which it sends data and then processes the response with another response which edits my table on the webpage. After the updation, I want my table to automatically update its state and not do a hard window reload. I have declared a state variable which would act as a flag in the parent component, which I then pass on to the child components for both setting and the useEffect. However, the function returns me a

Uncaught (in promise) TypeError: setReloadTable is not a function at setReloadTable("something");

I know it might be due to the async and await nature of my function and I've tried to even declare an external function which gets called, but then I get the same error too. I know this might have been asked before, but any idea what could be done in my situation?

My code:

export default function Predict({
disableEdit,
predDict,
setReloadTable,
reloadTable
}) {

const getPrediction = async () => {

    let response = await axios.post(
        "api1",
        predDict,
        {headers:{"Content-Type" : "application/json"}}
    ).catch(function (error) {
        let e = error;
        if (error.response) {
            e = error.response.data;
            if (error.response.data && error.response.data.error) {
                e = error.response.data.error;
            }
        } else if (error.message) {
            e = error.message;
        } else {
            e = "Unknown error occured";
        }
        return e;
    });

    response.data.forEach(async (data) => {
        let str = "x1=" + parseInt(data.x1) + "&x2=" + data.x2;
        console.log(str)
        
        let preddata = JSON.stringify({
            x1: data.x1,
            x2: data.x2
        });
        
        await axios.post(
            "api2",
            preddata,
            {headers:{"Content-Type" : "application/json"}}
            ).catch(function (error) {
                let e = error;
                if (error.response) {
                    e = error.response.data;                   
                    if (error.response.data && error.response.data.error) {
                        e = error.response.data.error;          
                    }
                } else if (error.message) {
                    e = error.message;
                } else {
                    e = "Unknown error occured";
                }
                return e;
            }
        );
    }); 
    setReloadTable("something");
};


return (
  <div>
    <StyledButton disabled={disableEdit} onClick={getPrediction}>
      Predict
    </StyledButton>
    </div>
);
}

Edit: App.js

const [reloadTable, setReloadTable] = useState("");
   
  return (
    <div className="App">
      <Container maxWidth="false" disableGutters={true}>
        <Grid container spacing={0}>
          <comp1 />
        </Grid>
        <Grid container spacing={0}>
          <LeftButtonGroup
            setReloadTable={setReloadTable}
            reloadTable={reloadTable}
          />
          <RefreshButton />
        </Grid>
        <Grid container spacing={0}>
          <comp3
            prop1={prop1} 
          />
          <TableFooter />
        </Grid>
      </Container>
    </div>
  );
}


export default App;   

Predict call in Left Button Group:

import * as React from 'react';
import Button from '@mui/material/Button';
import ButtonGroup from '@mui/material/ButtonGroup';
import Grid from "@mui/material/Grid";
import { styled } from "@mui/system";
import AdvanceSearch from "./advancesearch";
import Predict from "./predictbutton";



const StyledButtonGroup = styled(ButtonGroup, {})({
    height: 80,
    display: "flex",
    alignItems: "center",
    justifyContent: "center"
});


const StyledButton = styled(Button, {})({
    backgroundColor: "rgba(39,61,74,255)",
    color: "rgb(218,225,227)",
    borderColor: "rgba(21,175,241,255)",
    fontSize: 13,
    margin: 0,
    borderRadius: 0, 
    height: 30,
    width: 150,
    display: "flex",
    alignItems: "center",
    justifyContent: "space-around",
    ':hover': {
        backgroundColor: 'rgba(21,175,241,255)',
      }
});


export default function LeftButtonGroup({ 
    predDict,
    setReloadTable,
}) {
    return (
        <Grid item xs={4.5} backgroundColor="rgba(39,61,74,255)">
            <StyledButtonGroup variant="outlined">
                <Predict 
                    disableEdit={disableEdit}
                    predDict={predDict}
                    setReloadTable={setReloadTable}
                />
                <StyledButton>Analytics View</StyledButton>
                <AdvanceSearch 
                    ...
                />
            </StyledButtonGroup>
        </Grid>
    );
  }