Should I use component function or useEffect hook to get value based on multiple props?

These two Tooltip components do the same thing, using different methods.

Which method makes more sense? If it's the hook why is that better?

const Tooltip = (props) => {
  const isVisible = () => {
    return props.conditionOne && props.conditionTwo;
  }

  return (
    <div>
      {isVisible() && (
        <div>I am visible!</div>
      )}
    </div>
  );
}

vs.

const Tooltip = (props) => {
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    setIsVisible(props.conditionOne && props.conditionTwo);
  }, [props.conditionOne, props.conditionTwo]);

  return (
    <div>
      {isVisible && (
        <div>I am visible!</div>
      )}
    </div>
  );
}