Html – How to style mapped objects in React.JS?

I’m new to React.JS.
I need to make an order form with two switch buttons and then style them. I can’t style them.

I’ve been told to create the buttons this way

{props.options.map((option)=> (
    <div>{option.text}</div>
 ))}

<Header />
<Switch options={[
 {
   text: 'Buy',
   value: 'buy'
 },
 {
   text: 'Sell',
   value: 'sell'
 }
]} />
<Form />
<Profit />
<Button text="Submit" />

Here’s how the buttons should look like in the end
Buy and Sell Buttons in the end

I can’t find a way to style them separately. I’ve also tried conditional classes.

I’ve broken down the order form into several components and put them all together in the app.js file. The switch buttons are in the buy-sell-buttons.js file.

Here’s my code in the buy-sell-buttons.js file

import React from "react";
import './buy-sell-buttons.css';

function BuySellButtons (props) {
    
        const SwitchButtons = props.options.map((option, i) => (
          <div key={i}
            // className={`${option.id === option ? "active" : "inactive"}`}
            >
            {option.text}
          </div>
        ));
        return SwitchButtons;
    
}

export default BuySellButtons;

And here’s my code in the app.js file

const App = () => {
    return (
        <div className='binance-box'>
            <div className="all">
                 <AppHeader />
                 <BuySellButtons options = {[
                     {
                        text: 'Buy',
                        value: 'buy',
                        id: 'buy',
                     },
                     {
                        text: 'Sell',
                        value: 'sell',
                        id: 'sell'
                     }
                ]} />
                <Form />
                <Profit />
                <Button />
           </div>
      </div>
    );
};

This code doesn’t throw any errors or warnings.
To style it, I’ve tried conditional classes.

function BuySellButtons (props) {
    
        const SwitchButtons = props.options.map((option, i) => (
        <div key={i}
            className={`${option.id === option ? "active" : "inactive"}`}
            >
            {option.text}
        </div>
        ));
        return SwitchButtons;
    
}

Here’s my CSS code

button {
    font-family: 'Open Sans', sans-serif;
}

.option {
    margin: 0 1rem;
    align-items: center;
    padding-bottom: 10px;
    display: flex;

}

.btn {
    width: 10%;
    padding: 5px;
    text-align: center;
    border: none;
    display: flex;

}

.active {
    color: white;
    background-color: #68AD5C;
    box-sizing: border-box;
    margin: 0px;
    min-width: 0px;
    display: flex;
    width: 169px;
    -webkit-box-align: center;
    align-items: center;
    font-weight: bold;
    font-size: 20px;
    -webkit-box-pack: center;
    justify-content: center;
    cursor: pointer;
    height: 53px;
}

.active:hover {
    background-color: #45a049;   
}

.inactive {
    background-color: #2B283B;
    color: #63222b;
    box-sizing: border-box;
    margin: 0px;
    min-width: 0px;
    display: flex;
    width: 169px;
    -webkit-box-align: center;
    align-items: center;
    font-weight: bold;
    font-size: 20px;
    -webkit-box-pack: center;
    justify-content: center;
    cursor: pointer;
    height: 53px;
}

.inactive:hover {
    background-color: #383642;
    color: #7b343d;
}

The items aren’t displayed as flex items, and they only take one styling (they’re not different as they should be).

I’ve done this before in HTML and CSS only, and it worked fine.
Here’s the HTML file

<div class="buy-sell">
     <div data-type="buy" class="box" id="buy">Buy</div>
     <div data-type="sell" class="box" id="sell">Sell</div>
</div>

And my CSS file is practically the same.

.box {
    width: 10%;
    padding: 5px;
    display: inline-block;
    text-align: center;
}

.buy-sell {
    margin: 0 1rem;
    display: flex;
    align-items: center;
    flex: 1;
}

#buy {
    color: white;
    background-color: #68AD5C;
    box-sizing: border-box;
    margin: 0px;
    min-width: 0px;
    display: flex;
    width: 169px;
    -webkit-box-align: center;
    align-items: center;
    font-weight: bold;
    font-size: 20px;
    -webkit-box-pack: center;
    justify-content: center;
    cursor: pointer;
    height: 53px;
}

#sell {
    background-color: #2B283B;
    color: #63222b;
    box-sizing: border-box;
    margin: 0px;
    min-width: 0px;
    display: flex;
    width: 169px;
    -webkit-box-align: center;
    align-items: center;
    font-weight: bold;
    font-size: 20px;
    -webkit-box-pack: center;
    justify-content: center;
    cursor: pointer;
    height: 53px;
}

I pretty much don’t have any idea what I’m doing. I’ve tried some different things, like giving them the same style and then tried to somehow change the one with the text=Buy, but nothing worked.
Also, I don’t know if I have to use Flexbox (I did so in CSS); I’ve tried, and it doesn’t work either.