Why my InputBase focus doesn't work onClick React and Material UI

Question

I'm facing strange bug. I'm trying to focus my input element when i click on button but that doesn't focus my input.

I've tried to use react hook useRef and then use it in my inputRef.

const inputRef = useRef<HTMLInputElement>(null);

        <InputBase
          inputRef={inputRef}
          value={search}
          placeholder="Search"
          onChange={onSearch}
          onKeyPress={onSearchQuery}
        />

      <Button
        variant="text"
        onClick={() => {
          inputRef.current?.focus();
          onOpen();
        }}
      >
        Focus my input
      </Button>

Answer 1

Use React.createRef()

class MyClass extends React.Component {
        constructor(props) {
          super(props);
          // create a ref to store the textInput DOM element
          this.textInput = React.createRef();
          this.focus = this.focus.bind(this);
        }
      
        focus() {
            
          // Explicitly focus the text input using the raw DOM API
          // Note: we're accessing "current" to get the DOM node
          this.textInput.current.focus();
        }
      
        render() {
          // tell React that we want to associate the <input> ref
          // with the `textInput` that we created in the constructor
          return (
            <div>
    
            <InputBase
                ref={this.textInput} 
                value={search}
                placeholder="Search"
                onChange={onSearch}
                onKeyPress={onSearchQuery}
                />
    
                
    
                
            <Button variant="text" onClick={this.focus} >
                Focus my input
            </Button>
    
            </div>
          );
        }
      }