So you are giving paddingRight: 10px to the span, so at the end of the last child it's showing some space left.

There are two ways you can achive this

1. JS way
2. Css way

JS way

{options.map((opt,index) => (
        <span style={{ paddingRight: options.length - 1 === index ? '10px' : "0px" }}>{opt}</span>)
   )}

Css way you need to change the inline style to explicit style for this, I would say this is the recommended way of giving css over inline style or may be you can create one style object for that.

  <div className="parent">
        {options.map(opt => (
            <span style={{ paddingRight: '10px' }}>{opt}</span>)
        )}
     </div>

.parent{//parent css goes here}
.parent span:not(::last-of-type){padding-right: 10px}

  const Btn = () => {

    const options = ['test1', 'test2', 'test3'];

    return (
         <div style={{ position: 'absolute', left: '8px', widht: 'auto', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', backgroundColor: '#006C84', display: 'flex', gap: '10px' }}>
            {options.map(opt => (
                <span>{opt}</span>)
            )}
         </div>
     )
   }

use display: flex and gap inside the parent div style

https://codesandbox.io/s/keen-ganguly-kl4ys7?file=/src/App.js