Buscar dados de um elemento de array em outro arquivo Js

Olá, sou iniciante em programação e estou tentando me entender com o react, quando me deparei com um problema que não acho solução a dias ..

Eu quero passar as datas em negrito armazenadas na array do arquivo Lists.js, do trecho separado 1, para serem usadas no trecho 2 no arquivo contador.js, exibindo na tela junto com os elementos do trecho separado 3, respeitando o ID e usando a data de cada grupo de elementos da array Lists

1 - data_final: '2022-4-12'

2 - const timeRemaining = new Date('***2022-5-2***') - new Date();

3 - <a href={sorteios.referral}><img src={sorteios.image_url} alt={sorteios.title}/></a>

Eu gostaria um codigo em java que usasse a data de cada elemento do array e exibisse o contador de acordo com a data informada de cada lista do array

const timeRemaining = new Date({codigo aqui}) - new Date(); 

Abaixo os trechos dos códigos que estou usando, sem as importações e outros elementos que não interagem com o contador , desde ja agradeço a atenção e o help! Obrigado!

export const Lists = [
    {
        id: '1',
        referral: '',
        title: '',
        data_final: '22-4-12',
        image_url: ''

    },
    {
        id: '2',
        referral: '',
        title: '', 
        data_final: '22-4-11',
        image_url: ''
        
    },
    {
        id:'3' ,
        referral: '',
        title: '',
        data_final: '22-4-2',
        image_url: ''
        
    },

function Grid() {
    return (
        <Container>
            <h1>Logo</h1>
            <RedesSociais>
                <a href="https://www.google.com/" target="_blank" rel="noreferrer"><img src={Twitter} alt="twitter" width="28px" height="28px"></img></a>
                <a href="https://www.google.com/" target="_blank" rel="noreferrer"><img src={Telegram} alt="telegram" width="28px" height="28px"></img></a>
            </RedesSociais>
            <List>
                {lists.map(sorteios => {
                    return (
                        <Sorteios>
                            <Elemento key={sorteios.id}>
                                <a href={sorteios.referral} target="_blank" rel="noreferrer"><img src={sorteios.image_url} alt={sorteios.title}/></a>
                            </Elemento>
                            <Contador/> // Aqui exibe direitinho a data, porém a mesma em todos!
                        </Sorteios>
                    )
                })}
           </List>
        </Container> 
    )
}

export default Grid;

Código do countdown que acaba aparecendo em todos os elemento exibidos pelo array

const Contador = () => {
    
    const getCountdown = () => {
    const timeRemaining = new Date(`2022-5-2`) - new Date();
    let countdown = {};
    if (timeRemaining > 0) {
      countdown = {
        Days: Math.floor(timeRemaining / (1000 * 60 * 60 * 24)),
        Hours: Math.floor((timeRemaining / (1000 * 60 * 60)) % 24),
        Minutes: Math.floor((timeRemaining / 1000 / 60) % 60),
      };
    }
    return countdown;
  };
  const [countdown, setCountdown] = useState(getCountdown());

  useEffect(() => {
    setTimeout(() => {
      setCountdown(getCountdown());
    }, 1000);
  });

  const data = [];
  Object.entries(countdown).forEach(([unit, value]) => {
    data.push(
      <li key={Math.random().toString(16)}>
        <strong>{value}</strong> {unit}
      </li>
    );
  });

  return (
    <div>
      <Visor>{data}</Visor>
    </div>
  );
  
};

export default Contador;