Как получить значения отмеченного флажка и вывести его в поле ввода

Я пытаюсь получить проверенные значения флажка, а затем отобразить их в поле. У меня есть два файла: индекс с полем ввода, а затем флажок установлен в модальном режиме, который является другим компонентом, selectlanguage. Я хочу, чтобы, когда пользователь устанавливает один или несколько флажков, значение (я) появлялось на входе, а когда оно не было отмечено, значение покидало поле.

В настоящее время я могу добиться только одного значения, отображаемого в поле ввода.

Вот фрагмент кода.

index.js

import React, { useState } from "react";
import SelectLanguage from "../../components/modal/selectLanguage";

const index = () => {
const [chosenLanguage, setChosenLanguage] = useState([]);

function checkLanguage(e) {
  setChosenLanguage(e.target.name);
};

<label className="relative block p-3 border-b-2 border-gray-200 w-full" for="languages">
  <span for="languages">languages</span>
  <input
    id="languages"
    type="text"
    placeholder="Spanish, Arabic"
    autoComplete="off"
    onClick={languageShowModal}
    value={chosenLanguage}
  />
</label>
}

export default index;

selectlanguage.js

import { useState } from "react";

export default function SelectLanguage({ open, handleClose, checkLanguage }) {
  const handleCheckbox = (e) => {
    alert(e.target.name);
  };

  return open ? (
    <div>
      <label>
        <input type="checkbox" name="spanish" onChange={checkLanguage} />
        <span>spanish</span>
      </label>
      <label>
        <input type="checkbox" name="spanish" onChange={checkLanguage} />
        <span>french</span>
      </label>
      <label>
        <input type="checkbox" name="spanish" onChange={checkLanguage} />
        <span>arabic</span>
      </label>
    </div>
  ) : (
    ""
  );
}