Uncaught Error: Actions must be plain objects. Use custom middleware

The error seems common and when I made some research I saw that it’s mostly due to omission of middlewere (like thunk) or failing to call the dispatch function. Even after trying to put those things in check I keep getting the error

function RegisterScreen({ signup, isAuthenticated }) {

    const [accountCreated, setAccountCreated] = useState(false);
    const [username, setUsername] = useState([])
    const [email, setEmail] = useState([])
    const [password, setPassword] = useState([])
    const [re_password, setRe_password] = useState([])
    const [message, setMessage] = useState('')


    const dispatch = useDispatch()
    const auth = useSelector(state => state.auth)
    const { error, loading } = auth

    const submitHandler = (e) => {
        e.preventDefault();
        if (password !== re_password) {
            setMessage('Both passwords must be the same')
        } else {
            dispatch(signup(username, email, password, re_password));
            setAccountCreated(true);
        }
    }
    
 
    return (
        <Container className='content auth-container'>
            <div className="auth-header text-center mb-4">
                <h2 className="auth-header">Sign Up</h2>
                <p>Add your deatils to sign up</p>
            </div>
            {message && <Message variant='danger'>{message}</Message>}
            {error && <Message variant='danger'>{error}</Message>}
            {loading && <Loader />}
                    <Form className="auth-form" onSubmit={submitHandler}>
                        <Form.Group className="mb-3" controlId='name'>
                            <Form.Control 
                                className="auth-input search-ppty" 
                                required
                                minLength='6'
                                type="name" 
                                placeholder="Username" 
                                value={username}
                                onChange={(e) => setUsername(e.target.value)}
                                />
                        </Form.Group>
                        <Form.Group className="mb-3" controlId='email'>
                            <Form.Control
                                required 
                                className="auth-input search-ppty" 
                                type="email" 
                                placeholder="Email" 
                                value={email}
                                onChange={(e) => setEmail(e.target.value)}
                                
                                />
                        </Form.Group>
                        <Form.Group className="mb-3" controlId="password">
                            <Form.Control 
                                className="auth-input search-ppty" 
                                type="password" 
                                placeholder="Password" 
                                value={password}
                                onChange={(e) => setPassword(e.target.value)}
                                
                                />
                        </Form.Group>
                        <Form.Group className="mb-3" controlId="passwordConfirm">
                            <Form.Control 
                                className="auth-input search-ppty" 
                                type="password" 
                                placeholder="Confirm Password" 
                                value={re_password}
                                onChange={(e) => setRe_password(e.target.value)}
                                />
                        </Form.Group>
                        <Button type="submit" className="auth-button">Sign Up</Button>
                    </Form>
                    <Row className="p-2">
                        <Col>
                            <div className=""> Already have an account? <Link to="/login">Login</Link></div>
                        </Col>
                        <Col>
                            
                        </Col>
                    </Row>
        </Container>
        
    )
}

export default connect(null, {signup}) (RegisterScreen)

Redux store

import thunk from 'redux-thunk'
import { composeWithDevTools } from 'redux-devtools-extension'

const middleware = [thunk]

const store = createStore(
    reducer, 
    composeWithDevTools(applyMiddleware(...middleware))
    )

export default store

I have spent several hours still can’t find where the error is coming from in the code. How do I fix it?