How can I obfuscate inputs in React but not by using type=password?

Question

I was tasked with obfuscating input fields not related to passwords and the common solution of using type password is not very user friendly as many browsers e.g. chrome prompt to save password which isn't good UX.

I initially thought I could just use style -webkit-text-security: disc; and found that Firefox doesn't support this. I then tried to use autocomplete="off" but this is ignored by browsers as a web app should not be able to override browser settings.

I have read many articles and tutorials but they all use type password.

I am also very new to React so my searches might be missing good results.

This code is an example of how most solutions I have found handle this problem.

import React, { Component } from 'react';

class ObfuscateShowHide extends Component {
  constructor(props) {
    super(props);

    this.state = {
      hidden: true,
    };
    this.toggleShow = this.toggleShow.bind(this);
  }

  toggleShow() {
    this.setState({ hidden: !this.state.hidden });
  }

  render() {
    return (
      <div>
        <input type={this.state.hidden ? 'password' : 'text'} />
        <button onClick={this.toggleShow}>Peek</button>
      </div>
    );
  }
}

export default ObfuscateShowHide;

I also examined the idea of using a custom font as per this suggestion but it was rejected by the team.