How to organize the interaction of several components in React js?

Question

React

Greetings!
There is an application:

import React from 'react';
import Point from './point';
import Line from './line';

function App() {
  return (
    <div className="App">
      <Point />
      <Line  />
    </div>
  );
}

export default App;

Components:

class Line extends Base {
  render() {
    return (
      <button>
       Линия
      </button>
    );
  }
}

And

class Point extends Base {
  render() {
    return (
      <button>
       Точка
      </button>
    );
  }
}

import React from 'react';

class Base extends React.Component {
  constructor(props){
    super(props);
    this.state = {isToggleOn: true};
  }

  render(){
    return (
      <input/>
    )
  }
}

export default Base;

How to make it so that when you click on the "Line" button, disable the "Point" button.
It is understood that there will be a lot of buttons and it is necessary to disable the others when pressing one.
Tried on Redux or via the parent's this.setState, but nothing worked.

Answer 1

function App() {
  const [current, setCurrent] = React.useState(null)
  
  return (
    <div className="App">
      <Point disabled={current !== 'Point'} onClick={() => setCurrent('Point')} />
      <Line  disabled={current !== 'Line'} onClick={() => setCurrent('Line')} />
    </div>
  );
}


class Line extends Base {  // какой еще Base?
  render() {
    return (
      <button disabled={this.props.disabled} onClick={this.props.onClick}>
       Линия
      </button>
    );
  }
}