App/my-app/src/Components/modelSelection/index.jsx

import baseUrl from "@/services/api/api.config";
import { Button, Typography, useTheme } from "@mui/material";
import Grid from "@mui/material/Unstable_Grid2";
import { useEffect } from "react";

export default function ModelSelection({ fetchDocuments, fetchChunks }) {
  const theme = useTheme();

  const onHandleClearVariables = async () => {
    const url = `${baseUrl}/clear/clear_variables`;

    await fetch(url, {
      method: "DELETE",
      headers: { "Content-Type": "application/json" },
    })
      .then(() => fetchDocuments())
      .then(() => fetchChunks());
  };

  useEffect(() => {
    fetchDocuments(), fetchChunks();
  }, []);
  return (
    <>
      <Grid
        container
        mb={2}
        alignItems={"center"}
        border={1}
        borderColor={theme.palette.border.default}
        borderRadius={2}
        padding={2}
        sx={{
          backgroundColor: theme.palette.background.default,
        }}
      >
        <Grid item sm={6}>
          <Typography variant="h4">Do you want to clear Variables?</Typography>
        </Grid>

        <Grid
          item
          container
          alignItems="center"
          justifyContent={"center"}
          sm={4}
          border={1}
          borderColor={theme.palette.border.default}
          borderRadius={2}
          sx={{
            backgroundColor: "white",
          }}
        >
          <Button onClick={onHandleClearVariables}>
            <Typography variant="h6" color="black">
              Clear Variables
            </Typography>
          </Button>
        </Grid>
      </Grid>
    </>
  );
}