Error: Invalid hook call. Hooks can only be called inside of the body of a function component.

[Boboms]

A'm stuck at 1:12:52 at Submit function onAdd. There is an error in React as:

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
   See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
   React 2
   AddTask AddTask.js:4
   onSubmit AddTask.js:14
   React 14
   unstable_runWithPriority scheduler.development.js:468
   React 15
   js index.js:7
   js main.chunk.js:1172
   Webpack 7

The code is AddTask.js:

`
import { useState } from 'react'

const AddTask = ({ onAdd }) => {
const [text, setText] = useState([])
const [day, setDay] = useState([])
const [reminder, setReminder] = useState([false])

const onSubmit = (e) => {
    e.preventDefault()
    if(!text) {
        alert('Please add a task')
        return
    }
    onAdd({ text, day, reminder } )  // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! This function throws an Error !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
    setText('')
    setDay('')
    setReminder(false)
}

return (
    <form className='add-form' onSubmit={onSubmit}>
        <div className='form-control'>
            <label>Task</label>
            <input type='text' placeholder='Add Task' 
            value={text} onChange={(e) => setText(e.target.value)} 
        />
        </div>
        <div className='form-control'>
            <label>Day & Time</label>
            <input type='text' placeholder='Add Date' 
            value={day} onChange={(e) => setDay(e.target.value)} 
        />
        </div>
        <div className='form-control form-control-check'>
            <label>Set Reminder</label>
            <input type='checkbox' checked={reminder} 
            value={reminder} onChange={(e) => 
            setReminder(e.currentTarget.checked)} 
        />
        </div>
        <input type='submit' value='Save Task' 
        className='btn btn-block' />
    </form>
)

}

export default AddTask

`
Please help me to resolve this issue.

[liyaquath-code]

Would you mind sharing the code in the app.js file?
Also like the error states, in the package.json file verify if 'react' and 'react-dom' have the same version and if react-dom is >16.8.0.