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

import-{-Container,-TextField,-Box,-Typography,-Stack,-Button,-Modal,-}-from-"@mui/material";-import-{-useEffect,-useState-}-from-"react";-import-{-Link,-useNavigate-}-from-"react-router-dom";-import-ArrowForwardIcon-from-"@mui/icons-material/ArrowForward";-//-Icona-per-il-pulsante-import-supabase-from-"../../../config/supabaseClient";-function-Step1({-formData,-updateFormData,-updateProgress-})-{-const-navigate-=-useNavigate();-const-[check,-setcheck]-=-useState(false);-const-[isLoading,-setIsLoading]-=-useState(true);-const-[open,-setOpen]-=-useState(false);-useEffect(()-=>-{-const-checkUser-=-async-()-=>-{-const-{-data:-{-user-},-}-=-await-supabase.auth.getUser();-setcheck(!!user);-setIsLoading(false);-};-updateProgress();-checkUser();-},-[updateProgress]);-const-handleNext-=-()-=>-{-navigate("/form/step2");-};-const-style-=-{-position:-"absolute",-top:-"50%",-left:-"50%",-transform:-"translate(-50%,--50%)",-width:-400,-bgcolor:-"background.paper",-border:-"2px-solid-#000",-boxShadow:-24,-pt:-2,-px:-4,-pb:-3,-};-if-(isLoading)-{-return-<Typography>Caricamento...</Typography>;-}-return-(-<Container-maxWidth="lg"-sx={{-display:-"flex",-alignItems:-"center"-}}>-<Box-sx={{-width:-"100%",-boxShadow:-3,-borderRadius:-2,-padding:-4,-marginY:-7,-backgroundColor:-"white",-}}->-<Typography-variant="h4"-align="center"-gutterBottom>-Descrivi-più-che-puoi-il-tuo-viaggio-</Typography>-<Stack-spacing={2}>-<TextField-fullWidth-margin="normal"-label="titolo"-placeholder="Dai-un-nome-a-questa-esperienza"-variant="outlined"-value={formData.titolo}-onChange={(e)-=>-updateFormData({-titolo:-e.target.value-})}-disabled={!check}-/>-<TextField-fullWidth-margin="normal"-label="Budget"-placeholder="es.-:-400-600€-"-variant="outlined"-value={formData.budget}-onChange={(e)-=>-updateFormData({-budget:-e.target.value-})}-disabled={!check}-/>-<TextField-fullWidth-margin="normal"-label="stile-di-viaggio"-placeholder="solotrip,-coppia,-gruppo-etc"-variant="outlined"-value={formData.stile_viaggio}-onChange={(e)-=>-updateFormData({-stile_viaggio:-e.target.value-})-}-disabled={!check}-/>-<TextField-fullWidth-margin="normal"-label="destinazione"-placeholder="islanda,-barcellona,-europa"-variant="outlined"-value={formData.destinazione}-onChange={(e)-=>-updateFormData({-destinazione:-e.target.value-})}-disabled={!check}-/>-<Button-variant="contained"-color="primary"-size="large"-endIcon={<ArrowForwardIcon-/>}-onClick={()-=>-{-if-(!check)-{-setOpen(true);-}-else-{-handleNext();-}-}}->-Avanti-</Button>-</Stack>-</Box>-<Modal-open={!check}-onClose={()-=>-setOpen(false)}-aria-labelledby="child-modal-title"-aria-describedby="child-modal-description"->-<Box-sx={{-...style,-width:-300-}}>-<Typography-id="child-modal-title"-variant="h6"-gutterBottom>-Accesso-richiesto-</Typography>-<Typography-id="child-modal-description"-variant="body1"-gutterBottom>-Devi-essere-iscritto-o-autenticato-per-poter-compilare-il-form.-</Typography>-<Button-variant="contained"-color="primary"-component={Link}-to="/log"->-Iscriviti-o-accedi-</Button>-</Box>-</Modal>-</Container>-);-}-export-default-Step1;