can you improve this react code  import { useEffect, useState } from "react";
import { useApp } from "../../context/app-context";
import AppConfigurationWrapper from "../../shared/AppConfigurationWrapper/AppConfigurationWrapper";
import { ConnectNumberResponse } from "../../types";
import Summary from "../steps/Summary/Summary";
import Connect from "../steps/Connect/Connect";
import ConfigureSender from "../steps/ConfigureSender/ConfigureSender";

export default function ApplicationConfiguration() {
  const [step, setStep] = useState(1);
  const [isNextStepAllowed, setIsNextStepAllowed] = useState(false);
  const [nextClicked, setNextClicked] = useState(false);
  const [apiKey, setApiKey] = useState("");
  const [baseUrl, setBaseUrl] = useState("");
  const [toastMessage, setToastMessage] = useState("");

  const {
    state: { configuration },
  } = useApp();

  const [configurationData, setConfigurationData] = useState({
    apiKey: "",
    portalId: "",
    baseUrl: "",
  });

  const [availableSenders, setAvailableSenders] =
    useState<ConnectNumberResponse>({ smsNumbers: [], whatsAppNumbers: [] });

  useEffect(() => {
    // TODO: Get the proper API key and existing configuration from database
    setApiKey(configuration?.apiKey || "");
    setBaseUrl(configuration?.baseUrl || "");
  }, [configuration]);

  console.log("CONFIGURATION : ", configuration);
  const steps = [
    {
      title: "Connect",
      element: (
        <Connect
          setIsNextStepAllowed={setIsNextStepAllowed}
          nextClicked={nextClicked}
          apiKey={apiKey}
          setApiKey={setApiKey}
          baseUrl={baseUrl}
          setBaseUrl={setBaseUrl}
          setAvailableSenders={setAvailableSenders}
          setConfigurationData={setConfigurationData}
          setToastMessage={setToastMessage}
        />
      ),
    },
    {
      title: "Configure Sender",
      element: (
        <ConfigureSender
          setIsNextStepAllowed={setIsNextStepAllowed}
          nextClicked={nextClicked}
          senders={availableSenders}
          configData={configurationData}
          setToastMessage={setToastMessage}
        />
      ),
    },
    {
      title: "Summary",
      element: (
        <Summary
          setIsNextStepAllowed={setIsNextStepAllowed}
          nextClicked={nextClicked}
          setStep={setStep}
          setToastMessage={setToastMessage}
        />
      ),
    },
  ];

  const isFinalStep = steps.length === step;
  const isFirstStep = step === 1;

  useEffect(() => {
    if (isNextStepAllowed && isFinalStep) {
      // TODO: Close the configuration
      return;
    }

    if (!isNextStepAllowed || isFinalStep) {
      setNextClicked(false);
      return;
    }

    setStep((currStep) => {
      const nextStep = currStep + 1;
      return nextStep;
    });

    setIsNextStepAllowed(false);
    setNextClicked(false);
  }, [isFinalStep, isNextStepAllowed]);

  return (
    <AppConfigurationWrapper
      step={step}
      stepNames={steps.map((singleStep) => singleStep.title)}
      onNextClick={() => setNextClicked((nxtClicked) => !nxtClicked)}
      onCancelClick={() => {
        setStep((currStep) => {
          return currStep - 1;
        });
      }}
      isCancelHidden={isFirstStep}
      nextText={isFinalStep ? "Finish" : "Next"}
      cancelText="Back"
      toastMessage={toastMessage}
    >
      {steps[step - 1].element}
    </AppConfigurationWrapper>
  );
}