this is AddRoute.jsx
import { useState, useEffect } from 'react';
import { Container, Row, Col } from 'react-bootstrap';
import { BackButton } from './NavigationComponents';
import { BlockList, CreatePage, ActionList, Title } from './AddComponents';
import ErrorRoute from './ErrorRoute';

function AddRoute(props) {

    const [list, setList] = useState([]); // Used as array of objects
    const [title, setTitle] = useState("");
    const [date, setDate] = useState(""); // Used to publish programmed pages
    //const [dirtylist, dirtySetList] = useState(true);

    return (
        props.loggedIn ? ( // If not loggedin view ErrorRoute
            <Container fluid>
                <p></p>
                <Row>
                    <Col xs={2}>
                        <BackButton />
                    </Col>
                    <Col>
                        <h2 style={{textAlign: "center"}}>Create Page</h2>
                        <p></p>
                        <Title title={title} setTitle={setTitle} />
                        <p></p>
                        <CreatePage list={list} setList={setList} />
                    </Col>
                    <Col xs={2}>
                        <Col style={{ position: "relative", paddingRight: "10%", top: "50px" }}>
                            <BlockList list={list} setList={setList} />
                            <ActionList date={date} setDate={setDate} setList={setList} title={title} list={list} handleError={props.handleError} />
                        </Col>
                    </Col>
                </Row>
            </Container>
        )
            : <ErrorRoute />
    );
}


export default AddRoute;


this is AddComponents.jsx
import 'bootstrap-icons/font/bootstrap-icons.css';
import { useState, useEffect } from 'react';
import { Col, ListGroup, Button, Form, FormGroup, Accordion, Card, ButtonGroup } from 'react-bootstrap';
import { useNavigate } from 'react-router-dom';
import API from '../API';
import dayjs from 'dayjs';

function BlockList(props) {

    function headerBlock() {
        this.blockType = "Header";
        this.content = "";
    }

    function paragraphBlock() {
        this.blockType = "Paragraph";
        this.content = "";
    }
    function imageBlock() {
        this.blockType = "Image";
        this.content = "";
    }

    const addToList = (x) => {
        props.setList((oldList) => [...oldList, x]);
    };

    return (
        <>
            <h5 style={{ textAlign: "center" }}>Components</h5>
            <p></p>
            <Card>
                <ListGroup>
                    <ListGroup.Item >Header<Button className="float-end" variant="outline-success"
                        style={{ fontSize: '21px', display: "flex", justifyContent: 'center', alignItems: 'center', width: '25px', height: '25px', borderRadius: '40px' }}
                        onClick={() => {
                            addToList(new headerBlock());
                        }}>
                        <i className="bi bi-plus"></i>
                    </Button>
                    </ListGroup.Item>
                    <ListGroup.Item >Paragraph<Button className="float-end" variant="outline-success"
                        style={{ fontSize: '21px', display: "flex", justifyContent: 'center', alignItems: 'center', width: '25px', height: '25px', borderRadius: '40px' }}
                        onClick={() => {
                            addToList(new paragraphBlock());
                        }}>
                        <i className="bi bi-plus"></i>
                    </Button>
                    </ListGroup.Item>
                    <ListGroup.Item >Image<Button className="float-end " variant="outline-success"
                        style={{ fontSize: '21px', display: "flex", justifyContent: 'center', alignItems: 'center', width: '25px', height: '25px', borderRadius: '40px' }}
                        onClick={() => {
                            addToList(new imageBlock());
                        }}>
                        <i className="bi bi-plus"></i>
                    </Button>
                    </ListGroup.Item>
                </ListGroup>
            </Card>
        </>
    );
}

function CreatePage(props) {

    return (
        <Accordion>
            {props.list.map((x, index) => <MyBlock x={x} key={index} index={index} list={props.list} setList={props.setList} />)}
        </Accordion>
    );
}

function MyBlock(props) {

    const x = props.x;
    const [content, setContent] = useState(""); // When I delete a block (x) I need to re-render the content of the blocks (headers or paragraphs) showed at video.
    const [isAligned, setIsAligned] = useState(true); // No matter true or false value, used just to trigger the re-render (setIsAligned(!isAligned))
    //Otherwise the block content is ok (x.content) but a video I see all the blocks content shifted by one position.
    //This is why useEffect is being used.

    const images = [ //Server checks they're correct when submitting a request
        { url: 'http://localhost:3000/images/rome.jpg', alt: 'Image' },
        { url: 'http://localhost:3000/images/brasil.jpg', alt: 'Image' },
    ];

    useEffect(() => {
        setContent(x.content); //re-render block content at video
    }, [isAligned]);

    const removeFromList = (x) => {
        props.setList((oldlist) => oldlist.filter((item) => item != x));
        setIsAligned(!isAligned); // trigger re-render of content blocks
    };

    const handleUp = (x) => {
        props.setList(oldList => {
            const index = props.list.indexOf(x);
            const newList = [...oldList];
            [newList[index - 1], newList[index]] = [newList[index], newList[index - 1]];
            setIsAligned(!isAligned); // trigger re-render of content blocks
            return newList;
        });
    };

    const handleDown = (x) => {
        props.setList(oldList => {
            const index = props.list.indexOf(x);
            const newList = [...oldList];
            [newList[index], newList[index + 1]] = [newList[index + 1], newList[index]];
            setIsAligned(!isAligned); // trigger re-render of content blocks
            return newList;
        });
    };

    return (
        <Accordion.Item eventKey={props.index.toString()}>
            <Accordion.Header >
                <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%" }}>
                    {x.blockType}
                    <ButtonGroup style={{ paddingRight: "2%" }} >
                        {props.list.indexOf(x) != 0 && (
                            <Button as='div' style={{ fontSize: "0.8rem", padding: "0.25rem 0.5rem" }} variant="outline-secondary"
                                onClick={(ev) => { ev.stopPropagation(); handleUp(x) }}>
                                <i className="bi bi-arrow-up"></i>
                            </Button>)}
                        {props.list.indexOf(x) != (props.list.length - 1) && (
                            <Button as='div' style={{ fontSize: "0.8rem", padding: "0.25rem 0.5rem" }} variant="outline-secondary"
                                onClick={(ev) => { ev.stopPropagation(); handleDown(x) }}>
                                <i className="bi bi-arrow-down"></i>
                            </Button>)}
                        <Button as='div' size="sm" variant="outline-danger"
                            onClick={(ev) => { ev.stopPropagation(); removeFromList(x) }}>
                            <i className="bi bi-x-lg"></i>
                        </Button>
                    </ButtonGroup>
                </div>
            </Accordion.Header>
            <Accordion.Body>
                {x.blockType != "Image" ? (
                    <Form.Control as="textarea" value={content} onChange={(ev) => { x.content = ev.target.value; setContent(ev.target.value); }}></Form.Control>
                ) : (
                    <div>
                        <ImageForm />
                    </div>
                )}
            </Accordion.Body>
        </Accordion.Item>
    );

    function ImageForm() {
        return (
            images.map((image, index) => (
                <label key={index} style={{ paddingRight: "20px" }}>
                    <input checked={x.content == image.url} type="radio" name="image" onClick={() => { x.content = image.url; setIsAligned(!isAligned); }} />
                    <img style={{ borderRadius: "5%", paddingLeft: "5px", width: '256px', height: '144px' }} src={image.url} alt={image.alt} />
                </label>
            ))
        );
    }
}



function ActionList(props) {

    // Placed here because otherwise handleAction couldn't call navigate.
    // Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component.
    const navigate = useNavigate();

    const list = props.list;
    const title = props.title;
    const date = props.date;

    return (
        <Col className="pt-4">
            <Button variant="warning" style={{ marginBottom: "2%", width: "100%" }} onClick={() => handleAction("draft")}>Save as Draft</Button>
            <Button variant="success" style={{ marginBottom: "10%", width: "100%" }} onClick={() => handleAction("publish")}>Publish</Button>
            <Form.Control type="date" name="date" value={date} onChange={(ev) => props.setDate(ev.target.value)} />
            <Button variant="secondary" style={{ marginTop: "2%", width: "100%" }} onClick={() => handleAction("programmed")}>Schedule Publication</Button>
        </Col>
    );

    function handleAction(action) {

        ////////////////////////////////////CONTROLLO E SETALERT SE NON VA BENE POI RETURN()
        let valid = true;
        if (title == "") {
            console.log("You have to choose a title for the page.");
            valid = false;
        }
        else if (!(list.some(item => item.blockType == 'Header')) ||
            (!(list.some(item => item.blockType == 'Paragraph') || list.some(item => item.blockType == 'Image')))
        ) {
            console.log("You have to insert at least a Header and a Paragraph/Image.");
            //handleError("You have to insert at least a Header and a Paragraph/Image");
            valid = false;
        }
        else if (list.some(item => (item.content == ""))) {
            console.log("At least one block without content!");
            valid = false;
        }

        if (valid) {
            const data = { // Data formatted. Ready to send it to the server for Page Creation.
                title: title,
                blocks: JSON.stringify(list) //saved as json in db
            };

            switch (action) {
                case "draft":
                    Object.assign(data, { publishDate: null });
                    break;
                case "publish":
                    Object.assign(data, { publishDate: dayjs().format("YYYY-MM-DD") });
                    break;
                case "programmed":
                    const formattedDate = dayjs(date);
                    if (!formattedDate.isValid() || formattedDate.isBefore(dayjs())) { //dayjs() returns today date
                        console.log("Select a valid date."); // handleError !!
                        return;
                    }
                    Object.assign(data, { publishDate: formattedDate.format("YYYY-MM-DD") });
                    break;
                default:
                    break;

            }

            API.createPage(data)
                .then(() => {
                    navigate("/backoffice")
                })
                .catch((err) => handleError(err));
        }
    }

}




function Title(props) {
    return (
        <Form.Control type="text" name="text" value={props.title} placeholder="Page Title" onChange={ev => props.setTitle(ev.target.value)} />
    );
}

export { Title, ActionList, BlockList, CreatePage };

I get this error: Cannot update a component (`MyBlock`) while rendering a different component (`AddRoute`).
find the error in the code that causes this.