如何用modal和image显示相同的链接源？

import React, { useState } from 'react';
import { Button, Modal } from 'react-bootstrap';

const LinkModal = () => {
  const [showModal, setShowModal] = useState(false);
  const linkSource = 'https://example.com'; // 替换为实际的链接源

  const handleShowModal = () => {
    setShowModal(true);
  };

  const handleCloseModal = () => {
    setShowModal(false);
  };

  return (
    <>
      <Button variant="primary" onClick={handleShowModal}>
        打开Modal
      </Button>

      <Modal show={showModal} onHide={handleCloseModal}>
        <Modal.Header closeButton>
          <Modal.Title>链接源</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <input type="text" className="form-control" value={linkSource} readOnly />
          <img src={linkSource} alt="链接源预览图" className="img-fluid" />
        </Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={handleCloseModal}>
            关闭
          </Button>
        </Modal.Footer>
      </Modal>
    </>
  );
};

export default LinkModal;