如何使用bootstrap在react中禁用输入？

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>

import React from 'react';

const MyComponent = () => {
  return (
    <div>
      <input type="text" className="form-control disabled" />
    </div>
  );
}

export default MyComponent;

import React, { useState } from 'react';

const MyComponent = () => {
  const [isDisabled, setIsDisabled] = useState(false);

  const handleDisableInput = () => {
    setIsDisabled(true);
  }

  return (
    <div>
      <input type="text" className="form-control" disabled={isDisabled} />
      <button onClick={handleDisableInput}>禁用输入</button>
    </div>
  );
}

export default MyComponent;