How to use the react-router.useHistory function in react-router

export function BannerContextProvider(props: { children: React.ReactNode }) {
    const [bannerExists, setBannerExists] = useState(false);
    const [bannerRect, setBannerRect] = useState(null);
    const history = useHistory();
    useEffect(() => {
        // Clear the banner information when navigating between pages.
        return history.listen(() => {
            setBannerExists(false);
            setBannerRect(null);
        });
    }, [history]);

    return (

const Subscriptions: React.FunctionComponent = () => {
  const history = useHistory();
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const [subscription, setsubscription] = useState([]);
  const [state, setstate] = useState();
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const [formError, setFormError] = useState(null);
  const [loadingSubscription, setLoadingSubscription] = useState(true);
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const [loadStatus, setLoadStatus] = useState(true);
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const [statusList, setStatusList] = useState([]);
  const [planList, setPlanList] = useState([]);
  const [dialogVisible, setDialogVisible] = useState(false);
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const [loadingSubcriptionPost, setloadingSubcriptionPost] = useState(true);
  const [subscriptionPost, setSubscriptionPost] = useState(getInitialUpdateSubscriptionModel());
  const globalContext = useGlobalContext();

const App = () => {

    const [isAuthenticated, setIsAuthenticated] = useState(false);
    const [serverStatus, setServerStatus] = useState(null);
    const history = useHistory();

    const updateServerStatus = async () => {
        const status = await server.status();
        if (status) {
            setServerStatus(status)
        }
    }

    const handleAuthenticationStatus = useCallback(async (status) => {
        if (status?.username) {
            setIsAuthenticated(true);
            await updateServerStatus()
            socket.emit('server status subscribe');
            socket.on('server_status', updateServerStatus);
        }
    },[]);

export default function FinalStep() {
  const title = useSelector(getTitle);
  const duration = useSelector(getDuration);
  const timeslots = useSelector(getFullTimeslots);
  const participants = useSelector(getParticipantData);
  const timezone = useSelector(getTimezone);
  const dispatch = useDispatch();
  const history = useHistory();
  const [_createNewdle, submitting] = client.useBackendLazy(client.createNewdle);

  async function createNewdle() {
    const newdle = await _createNewdle(title, duration, timezone, timeslots, participants);

    if (newdle) {
      dispatch(newdleCreated(newdle));
      history.push('/new/success');
    }
  }

  const canSubmit = title.trim().length >= 3 && !submitting;

  return (

const GraphVertexDetails = ({vertexId}: Props) => {
  const classes = useStyles();
  const history = useHistory();
  return (
    <div>
      <div>
         {
            if (!props || !props.vertex) {
              return (
                <div>
                  
                </div>
              );
            }
</div></div>

export default function InventoryTreeNode(props: Props) {
  const {
    element,
    parent,
    depth,
    getHoverRightContent,
    onClick,
    selectedHierarchy,
  } = props;
  const defaultIsSelected =
    extractEntityIdFromUrl('location', location.search) === element.id;

  const classes = useStyles();
  const history = useHistory();

  const [isExpanded, setIsExpanded] = useState(null);
  const [selected, setSelected] = useState(defaultIsSelected);

  useEffect(() => {
    if (selectedHierarchy.includes(element.id)) {
      setIsExpanded(true);
    }
  }, [selectedHierarchy, element.id]);

  useEffect(() => {
    const unlistener = history.listen(location => {
      const locationId = extractEntityIdFromUrl('location', location.search);
      setSelected(locationId === element.id);
    });
    return () => unlistener();

const LandingPage: React.FunctionComponent = (props) => {

  let body = (document.getElementsByTagName('body')[0] as HTMLElement);
  const history = useHistory();
  const [formState, setFormState] = useState(getInitialLandingModel());
  const [formError, setFormError] = useState(null);
  const [loadingFormData, setLoadingFormData] = useState(true);
  const location = useLocation();
  const DayPickerStrings: IDatePickerStrings = {
    months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
    shortMonths: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    days: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
    shortDays: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
    goToToday: 'Go to today',
    prevMonthAriaLabel: 'Go to previous month',
    nextMonthAriaLabel: 'Go to next month',
    prevYearAriaLabel: 'Go to previous year',
    nextYearAriaLabel: 'Go to next year',
    closeButtonAriaLabel: 'Close date picker'
  };

const SideNav: FC = ({ sidebarOpen = false, onClose, className }) => {
  const [routes] = useContainer(RouteContainer);
  const history = useHistory();
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down('xs'));
  const [openMap, setOpen] = useReducer(
    (state: Record, name: string) => ({
      ...state,
      [name]: !state[name],
    }),
    {},
  );

  const drawerCss = useMemo(() => (sidebarOpen ? drawerOpen(theme) : drawerClose(theme)), [
    sidebarOpen,
    theme,
  ]);

  const drawerRootCss = useMemo(() => [drawer(theme), drawerCss], [drawerCss, theme]);

const OfferContent: React.FunctionComponent = (props) => {

  const {offerName} = props;

  const history = useHistory();
  const location = useLocation();
  const globalContext = useGlobalContext();
  const [hideSave, setHideSave] = useState(false);

  const layoutHelper: LayoutHelper = {
    menuItems:
      [
        {
          title: "Info",
          paths: [`/modifyoffer/${offerName}/info`],
          menuClick: () => {
            preventDataLoss('Info');
          }
        },
        {
          title: "Parameters",

const Footer: React.FC = () => {
  const { t } = useTranslation();
  const history = useHistory();
  const headerRef = useRef(null);

  const getTitleByURL = () => {
    const path = window.location.pathname;

    const titles: ObjectLiteral = {
      '/home/dashboard/repositories': {
        text: t('HEADER.TITLE.DASHBOARDREPOSITORY'),
        aria: t('DASHBOARD_SCREEN.ARIA_TITLE_REPOSITORY'),
        icon: 'pie',
        helper:
          'https://docs.horusec.io/docs/web/services/manager/introduction/#analytics-dashboard',
      },
      '/home/dashboard/workspace': {
        text: t('HEADER.TITLE.DASHBOARDWORKSPACE'),
        aria: t('DASHBOARD_SCREEN.ARIA_TITLE_WORKSPACE'),