use dropdown to show data from database in react, but it return undefined value

The dropdown show the value from database, but when I select it the value is undefined.

import {
    Select,
    MenuItem,
    FormControl,
    InputLabel,
  } from "@material-ui/core"; 

function FilePush() {
const [categorias, setCategorias] = useState([]);
const [fileID, setFileID] = useState("");

    return (
        <Container component="main" maxWidth="xs">
        <Select onChange={(e) => setFileID(e.target.value)}>
        <MenuItem value="None">
          <em>None</em>
        </MenuItem>

        {categorias.map((categoria,index ) => {
        return (
          <div key={index}>

            {categoria.json.map((f) => {
              return (
                <div key={f.filename}>

                   <MenuItem key={f.filename} value={f.filename} >{f.filename}</MenuItem>
                </div>
              );
            })}

            <hr />
          </div>
        );
      })}
         </Select>
        
         <p>You Selected: {fileID}</p>

    )
}
}

export default FilePush;

The code shows values that are coming from Database in the dropdown. However, when the options are selected, the result is undefined.