I am trying to control a MUI dialog with a signal, but even with the < p > the value from the signal is not rendered. However, the value of the signal is changed in the console.

App.jsx

import Fab from "@mui/material/Fab";
import AddIcon from "@mui/icons-material/Add";
import "./App.css";

import AddItemDialog from "./AddItemDialog";
import { signal } from "@preact/signals-react";

const addItemDialog = signal(false);

function App() {
    console.log("Render App");

    const fabStyle = {
        position: "absolute",
        bottom: 16,
        right: 16,
    };

    function openDialog() {
        addItemDialog.value = true;
    }

    return (
        <>
            <p>{addItemDialog.value}Test</p>
            <AddItemDialog addItemDialog={addItemDialog} />
            <Fab sx={fabStyle} color="primary" onClick={openDialog}>
                <AddIcon />
            </Fab>
        </>
    );
}

export default App;

AddItemDialog.jsx

mport React, { useRef } from "react";
import { Dialog, DialogTitle, DialogContent } from "@mui/material";

export default function AddItemDialog({ addItemDialog }) {
    console.log("Render Dialog");

    const name = useRef();

    function close() {
        addItemDialog.value = false;
    }

    return (
        <Dialog open={addItemDialog.value} onClose={close} fullWidth maxWidth="sm">
            <DialogTitle>Add Item</DialogTitle>
            <DialogContent>
                <input type="text" ref={name} />
            </DialogContent>
        </Dialog>
    );
}

Preview of Website

Replacing the signal to useState would work, but the whole app rerenders after changing