Bad setState call inside offcanvas component

I'm getting a bad setState() error inside the sidebar bootstrap offcanvas component. It says it can't update the component App() while rendering a different component sidebar() Sorry but I had to delete a large section of my code which was a fetch call. Thanks.

Error: index.js:1 Warning: Cannot update a component (App) while rendering a different component (Sidebar). To locate the bad setState() call inside Sidebar, follow the stack trace as described in

App.js

import React, {useEffect, useState} from 'react';
import './App.css';
import MovieTag from "./components/MovieTag/MovieTag";
import Sidebar from "./components/MovieTag/Sidebar";

interface Movie {
    id: number,
    poster_path: string,
    title: number
}

function App() {
    const [movies, setMovies] = useState([]);
    const [genre, setGenre] = useState(0);
    const [sort, setSort] = useState("popularity.desc");
    const [page, setPage] = useState(1);
    function GetMovies(genreId: number, sortBy: string, page: number){
        setGenre(genreId);
        setSort(sortBy);
        setPage(page);
    return (
        <div className={'container'}>
            <Sidebar filterByGenre={(genre: number) => {
                setGenre(genre);
            }}
                     sortBy={(sort: string) => {
                         setSort(sort);
                     }}
                     pageFilter={(page: number) => {
                         setPage(page);
                     }}
            />
                <div className={'row'}>
                    {movies.map((movie: Movie) => {
                        return (
                            <MovieTag key={movie.id}
                                      poster={movie.poster_path}
                                      title={movie.title}
                            />
                        )
                    })}
                </div>
        </div>
    );
}
export default App;

Sidebar.js

function Sidebar(props: any) {
    const [show, setShow] = useState(false);
    const handleClose = () => setShow(false);
    const handleShow = () => setShow(true);
    return (
        <React.Fragment>
            <Button variant={'secondary'} onClick={handleShow}>Filter</Button>
            <Offcanvas show={show} onHide={handleClose}>
                <Offcanvas.Header>
                    <Offcanvas.Title>Filter</Offcanvas.Title>
                </Offcanvas.Header>
                <Offcanvas.Body>
                    <DropdownButton title={'Genre'} drop={'end'}>
                        <Dropdown.Item eventKey={1}><button onClick={props.filterByGenre(28)}>Action</button></Dropdown.Item>
                    </DropdownButton>
                </Offcanvas.Body>
            </Offcanvas>
        </React.Fragment>
    )
}

The problem is on Sidebar component which is calling a setState of its parent component while rendering on <Dropdown.Item eventKey={1}><button onClick={props.filterByGenre(28)}>Action</button></Dropdown.Item>

If you need to call the function onClick, then create an arrow function to it.

onClick={() => props.filterByGenre(28)}