React - tabs component with active style

Question

import React, { useState } from 'react';

const Tabs = () => {
  const [activeTab, setActiveTab] = useState(1);

  const handleTabClick = (tabNumber) => {
    setActiveTab(tabNumber);
  };

  return (
    <div>
      <div style={{ display: 'flex' }}>
        <div
          style={{
            padding: '10px',
            cursor: 'pointer',
            borderBottom: activeTab === 1 ? '2px solid blue' : 'none',
          }}
          onClick={() => handleTabClick(1)}
        >
          Tab 1
        </div>
        <div
          style={{
            padding: '10px',
            cursor: 'pointer',
            borderBottom: activeTab === 2 ? '2px solid blue' : 'none',
          }}
          onClick={() => handleTabClick(2)}
        >
          Tab 2
        </div>
      </div>
      <div className="tab-content">
        {activeTab === 1 && <div>Content for Tab 1</div>}
        {activeTab === 2 && <div>Content for Tab 2</div>}
      </div>
    </div>
  );
};

export default Tabs;