Styled Card - Copy this React, Mui Component to your project

I-NEED-THAT-THIS-WHEN-ADDING-TEXT-ON-THE-TEXTFIELD-FOR-OTHER-SCRENNINGS-THIS-UPDATES-INLINE-ON-THE-SLECT-DIAPLYED:import-{-useTranslation-}-from-"react-i18next";-import-{-JobDetailsStepProps-}-from-"@pages/JobCreationPage/Components/JobDetailsStep/Components/JobDetailsStepProps";-import-useJobDetailsStep-from-"@pages/JobCreationPage/Components/JobDetailsStep/useJobDetailsStep/useJobDetailsStep";-import-{-ClassificationsSection-}-from-"./Components/ClassificationsSection";-import-{-GeneralInfoSection-}-from-"./Components/GeneralInfoSection";-import-{-LocationSection-}-from-"./Components/LocationSection";-import-{-HiringTeamSection-}-from-"./Components/HiringTeamSection";-import-{-JobSpecificQuestionsSection-}-from-"./Components/JobSpecificQuestionsSection";-import-{-RequirementsSection-}-from-"./Components/RequirementsSection";-import-{-CompensationAndBenefitsSection-}-from-"./Components/CompensationAndBenefitsSection";-import-{-ShiftDetailsAndCategoriesSection-}-from-"./Components/ShiftDetailsAndCategoriesSection";-import-{-SectionContainer-}-from-"../SectionContainer";-import-{-StyledBottomBarContainer-}-from-"./Styled/StyledBottomBarContainer";-import-Rocket-from-"../Rocket";-import-{-BottomBar-}-from-"../BottomBar";-import-{-UnsavedChangesModal-}-from-"./Components/Modals/UnsavedChangesModal";-//import-{-useSelector-}-from-"react-redux";-//import-{-RootState-}-from-"@state/store";-//Import-styled-components-export-const-JobDetailsStep-=-(props:-JobDetailsStepProps)-=>-{-const-{-t-}-=-useTranslation();-/*const-cuSecurity-=-useSelector(-(state:-RootState)-=>-state.security-);*/-const-{-isMobile,-hideRocket,-continueButtonLoader,-handleLeaveJobCreation,-exitLocation,-isUnsavedChangesModalOpen,-handleUnsavedChangesModalClose,-handleExitWithoutSaving,-handleContinue,-handleSaveProgress,-handleBack,-isRocketVisible,-scrollToTop,-handleCustomFiltersChange,-}-=-useJobDetailsStep(props);-return-(-<>-<UnsavedChangesModal-open={isUnsavedChangesModalOpen}-onClose={handleUnsavedChangesModalClose}-exitLocation={exitLocation}-saveAndExit={handleSaveProgress}-exitWithoutSaving={handleExitWithoutSaving}-/>-<div-style={{-paddingBottom:-isMobile-?-"10rem"-:-"6.5rem"-}}>-{!props.isGeneralInfoInitialLoad-&&-(-<SectionContainer-id={"general-info"}-title={t("jobCreation.jobDetailsSections.generalInfo.title")}->-<GeneralInfoSection-jobId={props.jobId}-generalInfoData={props.generalInfoData}-setGeneralInfoData={props.setGeneralInfoData}-errors={props.generalInfoErrors}-handleLeaveJobCreation={handleLeaveJobCreation}-filteredCustomFilters={props.filteredCustomFilters}-setFilteredCustomFilters={props.setFilteredCustomFilters}-selectedCustomFilterValues={props.selectedCustomFilterValues}-setSelectedCustomFilterValues={-props.setSelectedCustomFilterValues-}-customFiltersValidationErrors={-props.customFiltersValidationErrors-}-setCustomFiltersValidationErrors={-props.setCustomFiltersValidationErrors-}-handleCustomFiltersChange={handleCustomFiltersChange}-/>-</SectionContainer>-)}-{!props.isLocationInitialLoad-&&-(-<SectionContainer-id={"location"}-title={t("jobCreation.jobDetailsSections.location.title")}->-<LocationSection-jobId={props.jobId}-locationData={props.locationData}-setLocationData={props.setLocationData}-errors={props.locationErrors}-/>-</SectionContainer>-)}-{!props.isHiringTeamInitialLoad-&&-(-<SectionContainer-id={"hiring-team"}-title={t("jobCreation.jobDetailsSections.hiringTeam.title")}->-<HiringTeamSection-jobId={props.jobId}-hiringTeamData={props.hiringTeamData}-setHiringTeamData={props.setHiringTeamData}-errors={props.hiringTeamErrors}-/>-</SectionContainer>-)}-{!props.isClassificationsInitialLoad-&&-(-<SectionContainer-id={"classifications"}-title={t("jobCreation.jobDetailsSections.classifications.title")}->-<ClassificationsSection-jobId={props.jobId}-classificationsFields={props.classificationsFields}-classifications={props.classificationsData}-setClassifications={props.setClassificationsData}-selectedClassificationsValues={props.classificationsValues}-setSelectedClassificationsValues={props.setClassificationsValues}-classificationsErrors={props.classificationsErrors}-isClassificationsInitialLoad={props.isClassificationsInitialLoad}-/>-</SectionContainer>-)}-{!props.isJobSpecificQuestionsInitialLoad-&&-(-<SectionContainer-id={"job-specific-questions"}-title={t(-"jobCreation.jobDetailsSections.jobSpecificQuestions.title"-)}->-<JobSpecificQuestionsSection-jobId={props.jobId}-jobSpecificQuestionsData={props.jobSpecificQuestionsData}-setJobSpecificQuestionsData={props.setJobSpecificQuestionsData}-errors={props.jobSpecificQuestionsErrors}-/>-</SectionContainer>-)}-<SectionContainer-id={"requirements"}-title={t("jobCreation.jobDetailsSections.requirements.title")}->-<RequirementsSection-jobId={props.jobId}-/>-</SectionContainer>-{!props.isCompBenefitsInitialLoad-&&-(-<SectionContainer-id={"compensation-and-benefits"}-title={t(-"jobCreation.jobDetailsSections.compensationAndBenefits.title"-)}->-<CompensationAndBenefitsSection-jobId={props.jobId}-compBenefitsData={props.compBenefitData}-setCompBenefitsData={props.setCompBenefitsData}-errors={props.compBenefitsErrors}-/>-</SectionContainer>-)}-{!props.isShiftDetailsInitialLoad-&&-(-<SectionContainer-id={"shift-details-and-categories"}-title={t(-"jobCreation.jobDetailsSections.shiftDetailsAndCategories.title"-)}->-<ShiftDetailsAndCategoriesSection-jobId={props.jobId}-scheduleData={props.scheduleData}-setScheduleData={props.setScheduleData}-positionTypeData={props.positionTypeData}-setPositionTypeData={props.setPositionTypeData}-jobCategoriesData={props.jobCategoriesData}-setJobCategoriesData={props.setJobCategoriesData}-shiftDetailsErrors={props.shiftDetailsErrors}-isShiftDetailsInitialLoad={props.isShiftDetailsInitialLoad}-/>-</SectionContainer>-)}-</div>-<StyledBottomBarContainer-sx={{-width:-"36.75rem",-}}->-<Rocket-isVisible={isRocketVisible-&&-!hideRocket}-scrollToTop={scrollToTop}-/>-<BottomBar-jobId={props.generatedJobId.toString()}-activeStep={props.activeStep}-stepsCount={props.steps.length}-continueButtonLoader={continueButtonLoader}-handleBack={handleBack}-handleNext={handleContinue}-handleActivate={handleContinue}-handleSaveProgress={()-=>-handleSaveProgress(false,-"/client/JobListing/")-}-handleSaveAndExit={()-=>-handleSaveProgress(true,-"/client/JobListing/")-}-/>-</StyledBottomBarContainer>-</>-);-};