Tooltip react hook multiple functionality

I created a hook to handle a tooltip for different fields(useToolTip). This hook needs to create a piece of state with the current tip that is open in a formField that should be a string. Then return a callback if a new tip has been open which sets the current tip to be equal to the passed argument based on the fieldName.

This way a form will call thisuseToolTip hook and pass the return state and callback down to each form field. the form field will pass its fieldName property and the hook return to the tooltip component.

I also have a button (ToolTipButton) that needs to call the new tip callback function onclick with its fieldName property as a parameter.

The text box for this tooltip(ToolTipTextBox) will check to see if the current tip property (state from hook) is equal to its fieldName property if so then the tip will be render.

How can I accomplish this?

Here are all my components:

function useToolTip() {
  const {
   currentTip

  } = useState(formField);

  const showTooltip = useCallback(
    (_text: string) => {
      setShow(true);
      setText(_text);
    },
    [setShow, setText]
  );

  const hideTooltip = () => {
    setShow(false);
  };

  return {
    currentTip
  };
}

export default useToolTip;

Form:

const NewModelForm: FunctionComponent<NewModelFormProps> = (props) => {
  const { chooseFolder, onSubmit, chooseFile } = props;

  const history = useHistory();

  return (
    <Form
      onSubmit={(data) => {
        // console.log(data);
        onSubmit(data);
      }}
      id="new_model_form"
    >
      <FormField
        label="Simulation Name"
        name="name"
        placeholder="Enter a name for the simulation."
        tip="Enter a name to save your simulation as."
        required
        defaultValue="Simulation 1"
      />

      <OutputPathFieldset onClick={chooseFolder} defaultPath="/" />

      <FormField
        label="End Time (years)"
        type="number"
        name="end_time"
        defaultValue={10}
        step={1}
        tip="Enter the number of years to run the simulation."
      />

      <FormField
        label="Time Step (years)"
        type="number"
        name="time_step"
        defaultValue={0.5}
        tip="Enter the number of years for a time step"
        step={0.1}
      />

      <AnalysisTypeFieldset />

      <Dropdown
        name="logging"
        label="Logging"
        choices={{
          bug: 'Debug',
          info: 'Info',
          warn: 'Warning',
          err: 'Error',
        }}
        tip="Select a logging type"
      />

      <ReservoirTypeFieldset
        chooseFile={chooseFile}
        chooseFolder={chooseFolder}
      />

      <FormControls
        onCancel={() => history.push('/')}
        formID="new_model_form"
      />
    </Form>
  );
};

NewModelForm.defaultProps = {};

Button:

const ToolTipButton: FunctionComponent<ToolTipButtonProps> = (props) => {
  const { onClick } = props;

  return (
    <button type="button" className="form__tooltip" onClick={onClick}>
      <BsQuestion />
    </button>
  );
};

ToolTipButton.defaultProps = {};

export type ToolTipButtonProps = {
  onClick: () => void;
};

export default ToolTipButton;

Text box:

import React from 'react';

const ToolTipTextBox = (props) => {
    const {} = props
    return (
        <div> Tool tip box </div>
    )
}
export default ToolTipTextBox

Thank you!!!!!!!