function MyBlock(props) {

    const x = props.x;
    const [content, setContent] = useState(x.content);

    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' },
    ];

    const removeFromList = (x) => {
        props.setList((oldlist) => oldlist.filter((item) => item != x));
    };

    const handleUp = (x) => {
        props.setList(oldList => {
            const index = oldList.indexOf(x);
            const newList = [...oldList];
            [newList[index - 1], newList[index]] = [newList[index], newList[index - 1]];
            return newList;
        });
    };

    const handleDown = (x) => {
        props.setList(oldList => {
            const index = oldList.indexOf(x);
            const newList = [...oldList];
            [newList[index], newList[index + 1]] = [newList[index + 1], newList[index]];
            return newList;
        });
    };

    return (
        <Accordion.Item eventKey={props.list.indexOf(x)}>
            <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 avoid nested buttons error validateDOMnesting - since accordion header is a button itself!
                            <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>
                        {images.map((image) => (<ImageForm image={image} key={generatelocalId()}/> ))}
                    </div>
                )}
            </Accordion.Body>
        </Accordion.Item>
    );

    function ImageForm(props) {
        return (
                <label key={generatelocalId()} style={{ paddingRight: "20px" }}>
                    <input value={props.image.url} onChange={(ev) => { x.content = ev.target.value; setContent(ev.target.value); }} checked={x.content == props.image.url} type="radio" name="image" />
                    <img style={{ borderRadius: "5%", paddingLeft: "5px", width: '256px', height: '144px' }} src={props.image.url} alt={props.image.alt} />
                </label>
        );
    }
}



When I click an accordion and expoand the lower box and select an image all is ok. Then when I open another accordion and select another image everything seems fine. If I check back the first accordion I see x.content is ok but a video I don't see the radiobutton clicked.