I am trying to make a component which has the option of showing a history of selections or hiding the input. This is because the user may want to hide the data if they are in public but want the convenience of seeing past values if they aren't. I have the following component.

const SensitiveTextField: FunctionComponent<any> = ({ ...props }) => {
  const [showData, setShowData] = useState(false);

  useEffect(() => {
    (async () => {
      const storage = new ApplicationStorage();
      const showFieldData = props.name
        ? await storage.getShowSensitiveFieldData(props.name)
        : false;
      setShowData(showFieldData ?? false);
    })();
  }, []);

  const onVisibilityChange = () => {
    setShowData((value) => {
      const newValue = !value;
      if (props.name) {
        const storage = new ApplicationStorage();
        storage.setShowSensitiveFieldData(props.name, newValue);
      }
      return newValue;
    });
  };

  const renderInput = (params: any) => {
    return (
      <TextField
        {...params}
        type={showData ? 'text' : 'password'}
        InputProps={{
          ...params.InputProps,
          endAdornment: (
            <InputAdornment position="end">
              <IconButton
                onClick={onVisibilityChange}
                onMouseDown={onVisibilityChange}
              >
                {showData ? <VisibilityOff /> : <Visibility />}
              </IconButton>
            </InputAdornment>
          ),
        }}
      />
    );
  };

  return (
    <Autocomplete {...props} renderInput={(params) => renderInput(params)} />
  );
};

so the idea is that when showData is false, the input will be hidden and so will the options. I tried to do this by filtering the options to nothing but there is still an empty component that comes up. I tried to create a custom renderOptions that would just create an empty component but the same small bit showed up. The autocomplete uses the Popper component, is there a way to set that popper component to not render at all inside of the Autocomplete?

Here is where I invoke SensitiveAutocomplete

<SensitiveAutocomplete
  name={item.key}
  fullWidth
  size="small"
  onChange={onUserDefineValueChange(item.key)}
  label={inputLabel(item.key)}
  value={item.value}
  options={item.history}
 />