Javascript - Is JSDoc documentation useful? How to auto-generate elegant documentation?

Question

I have a few questions about the documentation stages in a development process... As a programmer, I like to write small pieces of code that are characteristic and representative enough not to require the use of comments in their bodies. And, if necessary, due to complex logic or some other "side effect", I usually type some other comment in my functions.

Q1 - Why to use JSDOC?

What about post-development documentation (API docs)? I mean, if you imagine a project with more than 5k modules and a lot of functions, adding JSDoc comments (in order to specify the behavior and dependencies of a method, the type of its parameters and return value, examples, etc.) could double the number of lines in your project. Moreover, it could be the case that in your code there are more comments than the code itself...

And yes... I know that some would think "don't comment on everything", just the necessary. And to be honest, I don't understand the reason for that thought. Aren't we supposed to be documenting the API of our development? Why leave it incomplete? And... do you really like working on a project with a half-defined developer experience (intellisense)?

In my opinion, the auto-generation of documentation with the JSDoc tool makes me feel like I'm back in the 90s. I don't know, it's so ugly that I don't even want to run the "yarn docs" command anymore.

Is JSDoc really still being used? Or is it already deprecated? Because the only use I find for it is, as I said, the intellisense (to increase the programmer's experience).

In a private project (not a public service/api or library) in which about 30 people work, and about 200 thousand lines of code, how important is JSDoc? I mean, whats the difference between this:

export default function CreatePostButton() {
  const { colors } = useTheme();

  const navigation = useNavigation();

  const handleOnPress = () => {
    navigation.navigate("PostCreator");
  };

  return (
    <CircleIconButton
      name="create"
      type="material"
      reverseColor={colors.white}
      color={colors.primary}
      onPress={handleOnPress}
      style={[
        styles.container,
        {
          shadowColor: colors.primary,
        },
      ]}
    />
  );
}

And this:

/**
 * Button for creating posts.
 *
 * @memberof module:Posts
 * @type {React.FC}
 * @function CreatePostButton
 * @returns {React.ReactElement} The create post button.
 * @requires module:CircleIconButton
 */
export default function CreatePostButton() {
  const { colors } = useTheme();

  const navigation = useNavigation();

  /**
   * Navigates to the `PostCreator` screen.
   *
   * @returns {void} Nothing.
   */
  const handleOnPress = () => {
    navigation.navigate("Creator");
  };

  return (
    <CircleIconButton
      name="create"
      type="material"
      reverseColor={colors.white}
      color={colors.primary}
      onPress={handleOnPress}
      style={[
        styles.container,
        {
          shadowColor: colors.primary,
        },
      ]}
    />
  );
}

Because to be honest, I don't find any use for it. I don't know, I feel that the code in these examples is so simple that 10 years can pass since its creation and anyone would understand it after a single reading.

And if for some reason I decided not to comment this component (ignoring the eslint warnings), it would not be included in the auto-generated documentation... leaving my api a bit incomplete.

Q2 - How to auto-generate fancy documentation for JavaScript?

Is there any tool for JavaScript to generate documentation like Firebase docs or any high end project? I mean, do the most professional coders code their documentations (using web dev), or do they use an auto-generation tool?

Note: I have tested some JSDoc custom templates (the most rated), but they are not even remotely close to the one I have left as a link.

Any tips?