Inline media queries using react - reactjs

Question

I have this section of code I am trying to render. At different viewports, the button styles change from underline to background color using a themeColor I pull from a JSON file with acting as my database in a sense. How do you write an 'else if' inline in react so when my state is "active" and the media query matches, the styles update accordingly?
const btnMobileStyle = useMediaQuery('(min-width: 375px)')
const btnTabletStyle = useMediaQuery('(min-width: 768px)')
const styles = {
buttonMobile: (btnMobileStyle) => ({
borderBottom: `2px solid ${themeColor}`,
}),
buttonTablet: (btnTabletStyle) => ({
borderBottom: 'none',
backgroundColor: `${themeColor}`,
}),
}
return (
<main className="main">
<div className="main__btn-container">
<button
style={overviewActive ? styles.buttonMobile(btnMobileStyle) : {}}
onClick={updateOverview}
className="main__btn"
>
Overview
</button>
<button
style={structureActive ? styles.buttonMobile(btnMobileStyle) : {}}
onClick={updateStructure}
className="main__btn"
>
Structure
</button>
<button
style={surfaceActive ? styles.buttonMobile(btnMobileStyle) : {}}
onClick={updateSurface}
className="main__btn"
>
Surface
</button>
</div>

Answer 1

I was able to solve the issue using this code:
const btnMobileStyle = useMediaQuery('(max-width: 768px)')
const styles = {
btnMobile: (btnMobileStyle) => ({
borderBottom: btnMobileStyle ? `2px solid ${themeColor}` : {},
backgroundColor: btnMobileStyle ? 'transparent' : themeColor,
}),
}
return (
<main className="main">
<div className="main__btn-container">
<button
style={overviewActive ? styles.btnMobile(btnMobileStyle) : {}}
onClick={updateOverview}
className="main__btn"
>
Overview
</button>
<button
style={structureActive ? styles.btnMobile(btnMobileStyle) : {}}
onClick={updateStructure}
className="main__btn"
>
Structure
</button>
<button
style={surfaceActive ? styles.btnMobile(btnMobileStyle) : {}}
onClick={updateSurface}
className="main__btn"
>
Surface
</button>
</div>
<div className="main__img-container">
<img
className="main__planet-img"
src={state.planetImg}
alt={state.planetName}
/>
<img
className={
surfaceActive
? 'main__planet-overlay main__planet-overlay--active'
: 'main__planet-overlay'
}
src={state.planetImgOverlay}
alt=""
/>
</div>