const teams = [
    {
        "conference": "Eastern",
        "division": "Atlantic"
    },
    {
        "conference": "Eastern",
        "division": "Central"
    },
    {
        "conference": "Eastern",
        "division": "Southeast"
    },
    {
        "conference": "Western",
        "division": "Northwest"
    },
    {
        "conference": "Western",
        "division": "Pacific"
    },
    {
        "conference": "Western",
        "division": "Southwest"
    }
]

export default function Demo3() {
    const [conference, setConference] = useState("Western");
    const [division, setDivision] = useState("Pacific");
    const [divisions, setDisvisions] = useState([...new Set(teams.map(obj => obj.division))]);
    const [file, setFile] = useState(null);
    const [correctFileType, setCorrectFileType] = useState(true);
    const [correctFileSize, setCorrectFileSize] = useState(true);
    const [notEmptyFileSize, setNotEmptyFileSize] = useState(true);
    const [showErrors, setShowErrors] = useState(false);

    const handleConferenceChange = event => {
        setConference(event.target.value);
        setDivision("");
        setDisvisions(teams.filter(obj => obj.conference === event.target.value).map(item => item.division));
    }

    const handleDivisionChange = event => {
        setConference(teams.find(obj => obj.division === event.target.value)?.conference);
        setDivision(event.target.value);
    }

    const isInputValid = input => showErrors && (!input || input === null || input === "");

    const ACCEPT_FILE_TYPE_LIST = ["application/pdf", "image/gif", "image/jpeg", "image/png", "image/tiff"];

    const handleFileUpload = event => {
        console.log("handleFileUpload..........", event.target.files)
        if (event.target.files && event.target.files.length > 0) {
            let file = event.target.files[0];
            let valid = true;
            if (!ACCEPT_FILE_TYPE_LIST.some(fileType => fileType === file.type)) {
                setCorrectFileType(false);
                valid = false;
            } else {
                setCorrectFileType(true);
            }
            if (file.size > 10000000) {
                setCorrectFileSize(false);
                valid = false;
            } else {
                setCorrectFileSize(true);
            }
            if (file.size <= 0) {
                setNotEmptyFileSize(false);
                valid = false;
            }
            if (valid) {
                setFile(file);
            } else {
                setFile(null);
            }
        }
    }

    const handleSubmit = event => {
        event.preventDefault();
        const formData = new FormData();
        formData.append("conference", JSON.stringify(conference));
        formData.append("division", JSON.stringify(division));
        formData.append("file", file)
        console.log("handleSubmit..........", formData)
    }

    return (
        <form onSubmit={handleSubmit}>
            <Grid container>
                <Grid xs={6}>
                    <Typography sx={{fontWeight: "bold"}}>Conference</Typography>
                    <FormControl fullWidth size="small">
                        <Select
                            value={conference}
                            onChange={handleConferenceChange}
                        >
                            {[...new Set(teams.map(obj => obj.conference))].map((conference, index) => <MenuItem key={index} value={conference}>{conference}</MenuItem>)}
                        </Select>
                    </FormControl>
                </Grid>
                <Grid xs={6}>
                    <Typography sx={{fontWeight: "bold"}}>Division</Typography>
                    <FormControl fullWidth size="small">
                        <Select
                            displayEmpty
                            renderValue={selected => selected?.length === 0 ? <span>-- Select --</span> : selected}
                            value={division}
                            onChange={handleDivisionChange}
                        >
                            {divisions.map((division, index) => <MenuItem key={index} value={division}>{division}</MenuItem>)}
                        </Select>
                    </FormControl>
                </Grid>
                <Grid xs={6}>
                    <Typography sx={{fontWeight: "bold"}}>File Upload</Typography>
                    <FormControl size="small" sx={{mr: 2}}>
                        <Button component="label" variant="contained">Choose File
                            <input
                                type="file"
                                hidden
                                required
                                accept=".pdf,image/gif,image/jpeg,image/png,image/tiff"
                                onChange={handleFileUpload}
                            />
                        </Button>
                    </FormControl>
                    {file && <FormLabel>{file.name}</FormLabel>}
                </Grid>
                <Grid xs={12} textAlign="left" sx={{display: "flex", flexDirection: "column"}}>
                    <FormControl size="small" error={isInputValid(file) || !notEmptyFileSize}>
                        {!file && showErrors && <FormHelperText sx={{textAlign: "left"}}>This field is required.</FormHelperText>}
                        {!setNotEmptyFileSize && showErrors && <FormHelperText sx={{textAlign: "left"}}>File should not be empty.</FormHelperText>}
                    </FormControl>
                    <FormControl size="small" error={!correctFileType}>
                        <FormHelperText sx={{textAlign: "left"}}>Only PDF, GIF, JPG, PNG or TIF format is acceptable.</FormHelperText>
                    </FormControl>
                    <FormControl size="small" error={!correctFileSize}>
                        <FormHelperText sx={{textAlign: "left"}}>File size should be below 10MB.</FormHelperText>
                    </FormControl>
                </Grid>
            </Grid>
            <Grid xs={12} container justifyContent="center" sx={{mt: 2}}>
                <Button type="submit" variant="contained">Submit</Button>
            </Grid>
        </form>
    )
}

When I console.log formData when submitting the form, I find it’s an empty object. I’ve expanded all fields in the object but there are no conference, division and file data. I’m sure that there are values for conference and division and there is a file selected when submitting the form. Why is that?

A captured screen of the console is shown below.

enter image description here