Cannot read property 'namedTypes' of undefined

[Digiox]

Hello, I am actually trying to make docs using react-styleguidist and react-docgen with javascript but the console is printing this Warning;

Warning: Cannot parse src/components/searchBar/SearchBar.jsx: TypeError: Cannot read property 'namedTypes' of undefined

When i copy-paste the error on google, we have a lot of result with typescript, but not our problem. maybe should i need to specify to docgen i am using js ? I don't know if i made a mistake or if this is a bug

my styleguide.config.js:

module.exports = {
    propsParser(filePath, source, resolver, handlers) {
        return require('react-docgen').parse(source, resolver, handlers)
      },
    components: 'src/components/**/[A-Z]*.jsx'
  }

here is my component:

import React, { useState } from "react";
import "../../webflow.css";
import "../../searchbar-88c054.webflow.css";
import SearchCategory from "./SearchCategory";
import _ from "lodash";
import PropTypes from "prop-types";

/**
 * filtering searchBar component
 */

const SearchBar = props => {
  const [inputValue, setValue] = useState("");
  const [filteredDatas, setDatas] = useState(props.content);

  const handleChange = (e, datas) => {
    setValue(e.target.value);

    const newDataTable = datas.map(({ data, categoryName }) => {
      let newDatas = data.filter(
        el =>
          _.includes(el.title, e.target.value) ||
          _.includes(el.title, _.toUpper(e.target.value))
      );
      return { categoryName, data: newDatas };
    });
    setDatas(newDataTable);
  };

  return (
    <div className="form-block-2 w-form">
      <form
        id="email-form"
        name="email-form"
        data-name="Email Form"
        className="formsearchinput"
        autoComplete="off"
      >
        <div className="inputbox">
          <img src={props.icon} alt="" className="searchicon" />
          <input
            onChange={e => {
              if (props.onChange) {
                props.onChange(e);
              }
              handleChange(e, props.content);
            }}
            type="text"
            className="text-field w-input"
            maxLength="256"
            name="searchInput"
            data-name="searchInput"
            placeholder="Rechercher un restaurant"
            id="searchInput"
            required=""
          />
        </div>
      </form>
      <div
        style={
          filteredDatas && inputValue && filteredDatas[0].data.length !== 0
            ? { visibility: "visible" }
            : { visibility: "hidden" }
        }
        className="drop-menu-search"
      >
        {filteredDatas &&
          inputValue &&
          filteredDatas.map((el, key) => {
            return (
              <SearchCategory
                callBack={el => {
                  props.callBack(el);
                }}
                visible={el.data.length !== 0 ? true : false}
                key={key}
                categoryName={el.categoryName}
                data={el.data}
              />
            );
          })}
      </div>
    </div>
  );
};

SearchBar.propTypes = {
  /**
   * Specify the datas to filter
   */
  content: PropTypes.array.isRequired,
  /**
   * triggered when input value is changed.
   */
  onChange: PropTypes.func,
  /**specify an icon to display */
  icon: PropTypes.string,
  /**
   * Get selected data
   * @param {object} data return the pressed data
   */
  callBack: PropTypes.func
};

export default SearchBar;

Thank you in advance, and sorry if i make a mistake posting this issue, this is my first time, and i am french :)