Mesmo componente com comportamentos diferentes no mobile e desktop

É possível fazer com que um componente se comporte de maneira diferente no desktop e mobile? Ex: Imagine um componente em que vc clique para exibir determinado conteúdo, tipo um toggle, mas que no mobile não fosse necessário clicar, esse conteúdo já viesse exibido. Pergunto isso porque se fosse apenas o aspecto visual trataria com CSS, mas como se trata de JS talvez precisasse de uma condição. É possível fazer algo do tipo?

const isMobile = window.innerWidth >= 768

E no render dizer que se for isMobile a renderização será diferente?

Só para ilustrar:

import React, { useState, useEffect } from 'react'
import './jobs.scss';
import data from './jobs.json';

function Jobs(){


  const [itemAtivo, updateItemAtivo] = useState();


  const imagemPortfolio = require.context('./images');



  return(

    <>
      <div className='jobs'>
        <div className='container'>
          <div className='wraper'> 

            {data.map((item, index) => (

            <div className='job mt-3'>

              { itemAtivo === index ?

                <div className='bg-content-job'>

                  <h2 className='mb-3 title'>
                    {item.title}
                  </h2>

                  <p className='mb-3 description'>
                    {item.description}
                  </p>

                  <p className='tecnology'>
                    Tecnologia: {item.framework}
                  </p>

                  <p className='text-link mt-5 text-link'>
                    <a href={item.link} title={item.title}>visitar</a>
                  </p>

                  <p className='less' onClick={() => updateItemAtivo(!index)} title='Fechar'>-</p>

                </div>
                :  
                <div>
                  <img src={imagemPortfolio(item.image)} className='img-fluid' alt={item.title}/>
                  <p className='more' onClick={() => updateItemAtivo(index)} title='Ver o projeto'>+</p>
                </div>  
              }

            </div>



              ))
            }

          </div>
        </div>
      </div>
    </>
  )
}

export default Jobs;