How to open HTML date input interface with react ref?

I have a date input element that I want to open it’s interface programmatically with React refs. Implementation provided blow didn’t work.

function myComponent() {
  const dateRef = useRef(null);
  return (
    <>
      <input type="date" ref={dateRef} />;
      <button
        onClick={() => {
          dateRef.current.click();
        }}
      >
        Open Date Interface
      </button>
    </>
  );
}

Here, when I click the button I want to open date picker interface. How can I achieve this?

>Solution :

That was close, you can just modify the click() method into showPicker()

function myComponent() {
  const dateRef = useRef(null);
  return (
    <>
      <input type="date" ref={dateRef} />;
      <button
        onClick={() => {
          dateRef.current.showPicker();
        }}
      >
        Open Date Interface
      </button>
    </>
  );
}