React styleguidist error with create react app

I am trying to add React Styleguidist to my project and am getting an "Unexpected token" compiler error.

I am using the Create react app to create the project. After it didn't work I created a new project and continue to get the same error when returning a component.

Here is the code for the simple component that I created to try to figure it out: import React from 'react';

import React from 'react';

const Component1 = (props)=><div>Test</div>;


export default Component1;

Based on what I read at https://react-styleguidist.js.org/docs/getting-started.html it looks like I should only need to run npm install --save-dev react-styleguidist and then npx styleguidist server

I am sure that I am missing something, but have not been able to find anything that would explain the error below.

SyntaxError: /Users/seanlynch/Projects/style/src/Components/Component1.js: Unexpected token (3:28)

  1 | import React from 'react';
  2 |
> 3 | const Component1 = (props)=><div>Test</div>;
    |                             ^
  4 |
  5 |
  6 | export default Component1;
 @ ./node_modules/react-styleguidist/lib/index.js (./node_modules/react-styleguidist/loaders/styleguide-loader.js!./node_modules/react-styleguidist/lib/index.js) 46:30-101
 @ ./node_modules/react-styleguidist/lib/index.js
 @ multi ./node_modules/react-styleguidist/lib/index ./node_modules/react-styleguidist/node_modules/react-dev-utils/webpackHotDevClient.js

add styleguide.config.js with follow lines

module.exports = {
    propsParser: require("react-docgen").parse,
    webpackConfig: require("react-scripts/config/webpack.config"),
};