instance.render is not a function. (functional component)

This is my first post.

I've been reading a lot about functional components and trying everything that I could, but nothing seems to work in my case. I am getting instance.render is not a function.

Hopefully some of you can see where my error is, as I am quite new to programming. This is my code:

App.js

import React, { useEffect, useState } from 'react';
import './App.css';
import Login from "./components/Login"
import Feed from "./components/Feed"
import { BrowserRouter as Router, Route, Switch } from "react-router-dom"


const App = () => {
  const [isLoggedIn, setLoggedIn] = useState(false)

  const handleLogin = token => {
    if (!token) return
    localStorage.setItem('token', token)

    setLoggedIn(true)
  }

  const handleLogout = () => () => {
    setLoggedIn(false)
    localStorage.clear()
  }
  
  return (
    <div className="App">
    
      <Router>
        <Feed isLoggedIn={isLoggedIn} logout={handleLogout} />
        <Switch>
          <Route
            exact
            path='/login'
            component={(props) => (
              <Login {...props} onLogin={handleLogin} />
            )}>
          </Route>
        </Switch>
      </Router>
    </div>
  ) 
}

export default App;

Login.js

import React from "react"
import axios from "axios"
import { Button, Form, FormGroup, Input } from 'reactstrap'
import "../css/Login.css"
import { Link, BrowserRouter as Router, Switch, Route } from "react-router-dom"
import Signin from "./Signin"

class Login extends React.Component {
    constructor (props) {
        super(props)
        this.state = {
            user_name: "",
            password: "", 
            error: false,
            loggedIn: false,
        }
    }

    handleChange = (e) => {
        this.setState({
            [e.target.name]: e.target.value,
        })
    }

    login = (event) => {
        event.preventDefault()
        const { user_name, password } = this.state
        axios("http://localhost:7001/api/login", {
            method: "POST",
            data: {
                user_name,
                password
            }
        })
        .then((response) => {
            this.props.onLogin(response.data.token)
            this.setState({ loggedIn: true })
            this.feedRedirect()
            console.log(response.data)
        })
        .catch((error) => {
            console.log(error)
        })
        this.setState({
            user_name: "",
            password: "",
            error: false,
        })
    }

    feedRedirect = () => {
        this.props.history.push('/feed')
    }


    render() {
        const { user_name, password, error, loggedIn } = this.state
        return (
            <div className="login">
                <Form className="login-container" onSubmit={this.login}>
                    <FormGroup>
                        <Input
                            value={this.state.user_name}
                            onChange={this.handleChange}
                            name="user_name"
                            type="text"
                            className="form-control mb-2"
                            placeholder="Username"
                        />
                    </FormGroup>
                    <FormGroup>
                        <Input
                            value={this.state.password}
                            onChange={this.handleChange}
                            name="password"
                            type="password"
                            className="form-control mb-2"
                            placeholder="Password"
                        />
                    </FormGroup>
                    <Button className="button-login" disabled={!user_name || !password}>
                        Log in
                    </Button>
                    <hr />
                    <Router>
                        <Link to="/signin"> Don't have an account? Sign up here</Link>
                    <Switch>
                        <Route path="/signin" component={Signin}> 
                        
                        </Route>
                    </Switch>
                    </Router>
                </Form>
                
            </div>
        )
    }
}
export default Login;

Any help will be appreciated. Thank you in advance.