to create and send React RefObject as prop

I am using azure-devops-ui TextField

Desired customization is type="number" (this is done), step ="15" (I still could not figure out how to do that)

The documentation says,

inputElement
React.RefObject<HTMLTextAreaElement & HTMLInputElement>
Optional ref to get passed to the input element

Can I do something like this,

<input type = "number" step ="15"/>

and pass it as inputElement to TextField component?

Here is an attempt for the solution :

import * as React from "react";
import { ObservableValue } from "azure-devops-ui/Core/Observable";
import { TextField, TextFieldWidth } from "azure-devops-ui/TextField";

const simpleObservable = new ObservableValue<string>("");

export default class TextFieldExample extends React.Component<any, any> {
  public render(): JSX.Element {
    const theRef = React.createRef<HTMLInputElement & HTMLTextAreaElement>(
      null
    );

    const temp = theRef.current;
    if (temp) {
      temp.step = "15";
    }

    // current is null, what is wrong here?
    console.log("ref.current", theRef.current);

    return (
      <div>
        <TextField
          inputType="number"
          inputElement={theRef}
          value={simpleObservable}
          onChange={(e, newValue) => (simpleObservable.value = newValue)}
          placeholder="Search keyword"
          width={TextFieldWidth.standard}
        />
      </div>
    );
  }
}

TextField Class:

import "../../CommonImports";
import "../../Core/core.css";
import "./TextField.css";
import * as React from "react";
import { ITextField, ITextFieldProps } from "./TextField.Props";
export declare class TextField extends React.Component<ITextFieldProps> implements ITextField {
    private inputId;
    inputElement: React.RefObject<HTMLInputElement & HTMLTextAreaElement>;
    constructor(props: ITextFieldProps);
    focus(): void;
    readonly select: () => void;
    get selectionEnd(): number | null;
    get selectionStart(): number | null;
    setSelectionRange(start: number, end: number, direction?: "forward" | "backward" | "none" | undefined): void;
    render(): JSX.Element;
}