How do I check if my input is on focus from the child component when I also need to prop drill the ref a parent component?

I am trying to update styles based on if the input is on focus. I understand that I can use useRef here, but inputRef is an optional prop that can be used by a parent component. How can I check if my input is on focus from my child component shown here?

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

import React, { RefCallback, FocusEventHandler } from "react";
import { RefCallBack } from "react-hook-form";
interface IInput {
  inputRef?: RefCallBack;
  onFocus?: FocusEventHandler<HTMLInputElement>;
}
const Input: React.FC<IInput> = ({ inputRef, onFocus }) => {
  return (
    <div>
      <input type="text" ref={inputRef} onFocus={onFocus} />
    </div>
  );
};
export default Input;

<!-- end snippet -->

You can evaluate the input's focus state by checking for the current document.activeElement inside a useEffect. Something like so:

React.useEffect(() => {
  if (document.activeElement === inputRef.current) {
    // update a different state variable
  }
}, [inputRef.current])

Then you can use that state to dynamically set styles on your parent div.