Cómo agregar una imagen para ser devuelto por un mapa en React (JS)

Estoy construyendo un chatbox, en una tarjeta tengo una messageList que hice con useState: enter image description here

enter image description here

Estoy tratando de agregar imágenes al InitMessagelist para que se muestre en la tarjeta con preview usando useRef pero no muestra la imagen (estoy cambiando el "Messagelist" FUNC ):

Convitativo Función ({Nombre}) {

 const [initMessageList, setMessageList] = useState([])

const messageList = initMessageList.map((now, key) => {
    if (now.Image) {
        return <img src={preview} />
    }
    return <Message text={now.text} key={key} />
});

let newText = useRef(null);

const addMessage = () => {
    if (newText.current.value != "") {
        setMessageList([...initMessageList, {
            text: newText.current.value,
            key: initMessageList.length
        }])
        newText.current.value = ""
    }
}

const onKeyFunc = function onKeyEnter(e) {
    if (e.key === "Enter" && newText.current.value != "") {
        { addMessage() };
    }
}

const [image, setImage] = useState();
const [preview, setPreview] = useState();

const pressRef = useRef();

useEffect(() => {
    if (image) {
        const reader = new FileReader()
        reader.onloadend = () => {
            setPreview(reader.result)
        };
        reader.readAsDataURL(image)
        setMessageList([...initMessageList, {
            text: preview,
            key: initMessageList.length
        }])
    } else {
        setPreview(null)
    }
}, [image]);

return (
    <Tab.Pane eventKey={name}>
        <Card className="card">
            <extraWarper className="extra">
                {messageList}
            </extraWarper>
        </Card>
        <InputGroup>
            <FormControl className="inputLine" ref={newText}
                placeholder="your text" onKeyPress={onKeyFunc}
            />
            <Button variant="outline-secondary">record</Button>
            <DropdownButton title="upload" variant="outline-secondary">
                <button onClick={(event) =>
                    pressRef.current.click()
                }>
                    Send image
                </button>
                <input ref={pressRef} id="filePicker" style={{ display: "none" }} type={"file"}
                    onChange={(event) => {
                        const file = event.target.files[0]
                        if (file) {
                            setImage(file)
                        } else {
                            setImage(null)
                        }
                    }
                    } />
            </DropdownButton>
            <Button variant="outline-secondary" onClick={addMessage}>send</Button>
        </InputGroup>

    </Tab.Pane>
);
 

Divullo predeterminado de exportación }

Ahora el sitio se ve así: enter image description here

Pero cuando intento agregar una imagen en blanco. ¿Algunas ideas? (Perdón por el lío, y gracias!)


No hay now.Image en este código.

     if (now.Image) {
        return <img src={preview} />
    }
    return <Message text={now.text} key={key} />
});
 

Puede haber now.Text que representa now.Image y preview en su código

Porque lo configura en esta parte del código

  setMessageList([...initMessageList, {
            text: preview,
            key: initMessageList.length
        }])
 
MySQL Query : SELECT * FROM `mejorcodigo`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1e518f6-43dfa.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1e518f6-43dfa.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?