如何更改react原生搜索栏中的清除图标

import React, { Component } from 'react';

class SearchBar extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showClearIcon: false,
      searchText: ''
    };
  }

  handleInputChange = (event) => {
    const searchText = event.target.value;
    this.setState({
      searchText,
      showClearIcon: searchText !== ''
    });
  }

  handleClearClick = () => {
    this.setState({
      searchText: '',
      showClearIcon: false
    });
  }

  render() {
    const { showClearIcon, searchText } = this.state;

    return (
      <div>
        <input
          type="text"
          value={searchText}
          onChange={this.handleInputChange}
        />
        {showClearIcon && (
          <button onClick={this.handleClearClick}>清除</button>
        )}
      </div>
    );
  }
}

export default SearchBar;