How to use react component in nextjs?

I would like to use this date picker which can select a date and a range.I am trying to implement it in a form as part of my nextJS project.

However, I am not quite sure how to go about adding components into nextJS given the code online.

I have already done the npm install react-day-picker --save

import React from 'react';import moment from 'moment';import Helmet from 'react-helmet';import DayPickerInput from 'react-day-picker/DayPickerInput';import 'react-day-picker/lib/style.css';import { formatDate, parseDate } from 'react-day-picker/moment';export default class Example extends React.Component {constructor(props) {super(props);this.handleFromChange = this.handleFromChange.bind(this);this.handleToChange = this.handleToChange.bind(this);this.state = {from: undefined,to: undefined,};}showFromMonth() {const { from, to } = this.state;if (!from) {return;}if (moment(to).diff(moment(from), 'months') < 2) {this.to.getDayPicker().showMonth(from);}}handleFromChange(from) {// Change the from date and focus the "to" input fieldthis.setState({ from });}handleToChange(to) {this.setState({ to }, this.showFromMonth);}render() {const { from, to } = this.state;const modifiers = { start: from, end: to };return (<div className="InputFromTo"><DayPickerInputvalue={from}placeholder="From"format="LL"formatDate={formatDate}parseDate={parseDate}dayPickerProps={{selectedDays: [from, { from, to }],disabledDays: { after: to },toMonth: to,modifiers,numberOfMonths: 2,onDayClick: () => this.to.getInput().focus(),}}onDayChange={this.handleFromChange}/>{' '}—{' '}<span className="InputFromTo-to"><DayPickerInputref={el => (this.to = el)}value={to}placeholder="To"format="LL"formatDate={formatDate}parseDate={parseDate}dayPickerProps={{selectedDays: [from, { from, to }],disabledDays: { before: from },modifiers,month: from,fromMonth: from,numberOfMonths: 2,}}onDayChange={this.handleToChange}/></span><Helmet><style>{`.InputFromTo .DayPicker-Day--selected:not(.DayPicker-Day--start):not(.DayPicker-Day--end):not(.DayPicker-Day--outside) {background-color: #f0f8ff !important;color: #4a90e2;}.InputFromTo .DayPicker-Day {border-radius: 0 !important;}.InputFromTo .DayPicker-Day--start {border-top-left-radius: 50% !important;border-bottom-left-radius: 50% !important;}.InputFromTo .DayPicker-Day--end {border-top-right-radius: 50% !important;border-bottom-right-radius: 50% !important;}.InputFromTo .DayPickerInput-Overlay {width: 550px;}.InputFromTo-to .DayPickerInput-Overlay {margin-left: -198px;}`}</style></Helmet></div>);}}

https://react-day-picker.js.org/examples/input-from-to

however, I do not know how to implement this in my next.js components folder

Can anyone advise how i can possibly go about this?

I only know that components have to start like this:

const DateRange = () => {}