ref with React Hooks and TypeScript

import React, { useEffect, useRef } from "react";

interface CockpitProps {
  onClick: any;
  persons: any[];
  personsLength: any;
}

export const Cockpit: React.FC<CockpitProps> = React.memo(props => {
  const toggleBtnRef = useRef<HTMLButtonElement>(null);

  useEffect(() => {
    console.log("[Cockpit.js] useEffect");
    const { current } = toggleBtnRef;
    if (!current) {
      return;
    }
    current.click();
  }, []);

  return (
    <>
      <h1>React App</h1>
      <p>lorem foo</p>
      <button ref={toggleBtnRef} onClick={props.onClick}>
        Switch Name
      </button>
    </>
  );
});