How do you comment a React Component?

import React, { useState } from 'react';
import { Text, TextInput, View } from 'react-native';
import PropTypes from "prop-types";

const PizzaTranslator = ({ pizzaEmoji = '🍕'}) => {
  const [text, setText] = useState('');
  return (
    <View style={{padding: 10}}>
      <TextInput
        style={{height: 40}}
        placeholder="Type here to translate!"
        onChangeText={newText => setText(newText)}
        defaultValue={text}
      />
      <Text style={{padding: 10, fontSize: 42}}>
        {text.split(' ').map((word) => word && pizzaEmoji).join(' ')}
      </Text>
    </View>
  );
}

PizzaTranslator.propTypes = {
   pizzaEmoji: PropTypes.string,
}

export default PizzaTranslator;

I am documenting my React Native (EXPO) app's components. For that, I have tried to install

react-styleguidist.js

but, after following all the installation process, I have fallen in multiple errors related with the expo webpack configuration.

Is it recommended to use third-party libraries like react-styleguidist in order to auto-generate visual documentation? Or is it enough to comment them using JSDOC syntax?

What do you recommend me in order to comment my components code? Any library or guide you use?