disable another button on react js

i have a react project which has three buttons in it. when a button is clicked, for example the second button, it will log “this is from button two ” followed by a random number with time interval 500ms. my aim is when i click a button, another buttons will be disabled, how to do this? thanks in advance.

this is my App.js

import './App.css';
import { Button1 } from './Button1.React';
import { Button2 } from './Button2.React';
import { Button3 } from './Button3.React';

function App() {
  
    return (
      <div className="App">
        <Button1>log one</Button1>
        <Button2>log two</Button2>
        <Button3>log three</Button3>
      </div>
    );
  
  
}

export default App;

this is my Button1.React.jsx

import React from "react";

export const Button1 = ({
    children,
    type,
    doStuff1 = ()=> {
        console.log("this is button one ", Math.random().toFixed(1));
        setTimeout(doStuff1, 500);
      },
})=>{
    return (
        <button onClick={doStuff1} type={type}>
        {children}
        </button>
    )
};

this is my Button2.React.jsx

import React from "react";

export const Button2 = ({
    children,
    type,
    doStuff2 = ()=> {
        console.log("this is button two ", Math.random().toFixed(1));
        setTimeout(doStuff2, 500);
      }
})=>{
    return (
        <button onClick={doStuff2}type={type}>
        {children}
        </button>
    )
};

this is my Button3.React.jsx

import React, { Children } from "react";

export const Button3 = ({
    children,
    type,
    doStuff3 = ()=> {
        console.log("this is button three ", Math.random().toFixed(1));
        setTimeout(doStuff3, 500);
      }
})=>{
    return (
        <button onClick={doStuff3}type={type}>
            {children}
        </button>
    )
};

and here’s the screenshot from the rendered page

i’ve been told to do this is using useState that returns a boolean condition to disable/enable click, but i don’t know how to do this.