How to use the @uifabric/react-hooks.useId function in @uifabric/react-hooks

export const TooltipDisplayExample: React.FunctionComponent = () => {
  // Use useId() to ensure that the ID is unique on the page.
  // (It's also okay to use a plain string and manually ensure uniqueness.)
  const tooltip1Id = useId('tooltip1');
  const tooltip2Id = useId('tooltip2');

  return (
    <div>
      In some cases when a TooltipHost is wrapping <code>inline-block</code> or <code>inline</code> elements, the positioning of the Tooltip
      may be off. In these cases, it's recommended to set the TooltipHost's <code>display</code> property to <code>inline-block</code>, as
      in the following example.
      <br>
      <br>
      
        <button aria-describedby="{tooltip1Id}" style="{buttonStyle}">
          Hover for incorrect positioning
        </button>
      {' '}
      </div>

export const TooltipCustomExample: React.FunctionComponent = () => {
  // Use useId() to ensure that the ID is unique on the page.
  // (It's also okay to use a plain string and manually ensure uniqueness.)
  const tooltipId = useId('tooltip');

  return (
    
      
    
  );
};

export const TooltipDisplayExample: React.FunctionComponent = () => {
  // Use useId() to ensure that the ID is unique on the page.
  // (It's also okay to use a plain string and manually ensure uniqueness.)
  const tooltip1Id = useId('tooltip1');
  const tooltip2Id = useId('tooltip2');

  return (
    <div>
      In some cases when a TooltipHost is wrapping <code>inline-block</code> or <code>inline</code> elements, the positioning of the Tooltip
      may be off. In these cases, it's recommended to set the TooltipHost's <code>display</code> property to <code>inline-block</code>, as
      in the following example.
      <br>
      <br>
      
        <button aria-describedby="{tooltip1Id}" style="{buttonStyle}">
          Hover for incorrect positioning
        </button>
      {' '}
      </div>

export const TooltipBasicExample: React.FunctionComponent = () => {
  // Use useId() to ensure that the ID is unique on the page.
  // (It's also okay to use a plain string and manually ensure uniqueness.)
  const tooltipId = useId('tooltip');

  return (
    <div>
      
        Hover over me
      
    </div>
  );
};

export const TooltipInteractiveExample: React.FunctionComponent = () => {
  // Use useId() to ensure that the ID is unique on the page.
  // (It's also okay to use a plain string and manually ensure uniqueness.)
  const tooltipId = useId('tooltip');

  return (
    <div>
      
        Interact with my tooltip
      
    </div>
  );
};

export const TooltipOverflowExample: React.FunctionComponent = () => {
  const parentTooltipId = useId('text-tooltip');
  const [shouldOverflow, setShouldOverflow] = React.useState(false);
  const [isParentTooltipVisible, setIsParentTooltipVisible] = React.useState(false);

  const onOverflowChange = React.useCallback(() => setShouldOverflow(!shouldOverflow), [shouldOverflow]);

  return (
    <div>
      

      {/* Example of TooltipOverflowMode.Parent */}
      <div>
        <label>Show tooltip when parent's content overflows</label>

        {/* This parent element will overflow */}
        <div>
          This is the parent element.</div></div></div>

export const ChoiceGroupLabelExample: React.FunctionComponent = () => {
  // Use the useId() hook to ensure that the label ID is unique on the page. Notes:
  // - It's also okay to use a plain string and manually ensure its uniqueness.
  // - In a function component, we get the ID with the useId() hook so that it will stay the same.
  //   (In a class, you'd create the ID in the constructor with getId and save it in a private member.)
  const labelId = useId('labelElement');

  return (
    <div>
      <label required="{true}" id="{labelId}">
        Custom label
      </label>
      </div>

insightBoard: false,
      fieldConfig: false,
      configPanel: false,
      dataConfig: false
    }
  })
  const [cleanMethod, setCleanMethod] = useState('dropNull');
  const [sampleMethod, setSampleMethod] = useState(SampleKey.none)
  const [sampleSize, setSampleSize] = useState(0.2);

  const dataSetting = useRef(null);
  const fileEle = useRef(null);

  const [dataSource, preparedData] = useDataSource(state.rawData, state.fields, cleanMethod);

  const labelId = useId('labelElement');

  async function fileUploadHanlder () {
    if (fileEle.current !== null && fileEle.current.files !== null) {
      const file = fileEle.current.files[0];
      /**
       * tmpFields is fields cat by specific rules, the results is not correct sometimes, waitting for human's input
       */
      let tmpFields: BIField[] = [];
      let rawData: DataSource = [];

      if (file.type === 'text/csv' || file.type === 'application/vnd.ms-excel') {
        rawData = await FileLoader.csvLoader(file);
      } else if (file.type === 'application/json') {
        rawData = await FileLoader.jsonLoader(file);
      } else {
        throw new Error(`unsupported file type=${file.type} `)