Por lo tanto, le está dando paddingRight: 10px al lapso, por lo que al final del último elemento secundario muestra que queda algo de espacio.

Hay dos formas de lograr esto

1. Camino JS
2. manera css

Camino JS

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

Css forma en que necesita cambiar el estilo en línea a un estilo explícito para esto, diría que esta es la forma recomendada de dar css sobre el estilo en línea o puede ser que pueda crear un objeto de estilo para eso.

 <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 y gap dentro del estilo div principal

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