Issue in rendering react component which is a verdaccio package

Question

We are using verdaccio for publishing our react component as an npm package to the verdaccio npm registry.
Now, in another react app we are consuming this package, but we are getting error when we are rendering the imported jsx code from the package . If anybody has any idea regarding this issue, kindly revert. Any help would be appreciated.

This is the react component we have published as a an npm module to the verdaccio directory.

react component:

import React from 'react';

class  myInputForm extends React.Component {
    render(){
        return(
            <form>
                 Name: <input type="text" name="name" autoComplete="off" /><br />
                 Area: <input type="text" name="area" autoComplete="off"  /><br />
                 Email: <input type="email" name="email" autoComplete="off"  /><br />
                 <button>Submit</button>
            </form>
        )
    }
    

}

export default myInputForm;

React Component where it is consumed. This react component is part of another react app.

 import React from 'react';
    import {MyInputForm} from 'mynpmpackage/src/index';
    const ContactUs = ( ) => {
        return (
            <div style={{backgroundColor:'green', height: '817px'}}>
            <h1>Contact Form</h1>
            <MyInputForm />
            </div>
        )
    }

export default ContactUs;

Error on console after npm start: