Доступ к DOM элементам внутри нескольких одинаковых компонентов React

Есть два одинаковых React-компонента Calendar.js. Внутри каждого есть input с id. id у них получаются одинаковыми. В таком случае input внутри компонента можно найти только если компонент один. Получается, нужно прописывать доступ через querySelector? Но это неудобно. Нельзя каким-нибудь образом закрыть каждый компонент Calendar.js чтобы внутри него через id можно было получать нужный элемент?

App.js

import React from 'react';
import Calendar from './Calendar.js';

export default function () {
    return(
        <section>
         <Calendar id="new-calendar"/>
         <Calendar id="checked-calendar"/>
        </section>
    );
}

Calendar.js

import React from 'react';

export default function Calendar(props){
function changeYear() {
        const year = document.getElementById('year');
        ...
    }
return(
<div>
  <input id="month">
</div>
 )
};