jsonファイルのuserNameを表示させたい

TypeError: Cannot read property 'toLowerCase' of null

interface UserProfile {
  userName: string;

export default function Asynchronous() {
  const [options, setOptions] = useState<UserProfile[]>([]);

  useEffect(() => {
    let active = true;

    if (!loading) {
      return undefined;
    }

    (async () => {
      const response = await fetch("http://localhost:8080/api/v1/userprofile");
      await sleep(1e3);
      const userprofiles = await response.json();
      // keys(o: object): string[];
      if (active) {
        setOptions(
          Object.keys(userprofiles).map(
            (key) => userprofiles[key]
          ) as UserProfile[]
        );
      }
    })();
    return () => {
      active = false;
    };
  }, [loading]);

return (
    <Autocomplete
      id="demo"
      getOptionSelected={(option, value) => option.userName === value.userName}
      getOptionLabel={(option) => option.userName}
      options={options}
      loading={loading}
      renderInput={(params) => (
        <TextField
          {...params}
          label="検索"
          variant="outlined"
          InputProps={{
            ...params.InputProps,
            endAdornment: (
              <React.Fragment>
                {loading ? (
                  <CircularProgress color="inherit" size={20} />
                ) : null}
                {params.InputProps.endAdornment}
              </React.Fragment>
            ),
          }}
        />
      )}
    />
  );
}