Ajuda com lógica e implementação

Boa noite Pessoal, preciso de um auxílio para um trabalho.

No momento tenho uma pagina de cadastro de empresas. Nessa pagina existem alguns inputs para cadastro e também dois popups. Um que adiciona cargos da empresa e o outro que adiciona unidades (filiais). Ao abrir o popup, o usuario digita o cargo ou os dados filial e clica em inserir. Ao clicar em inserir, preciso armazenar esse dado do input em uma variável, para que quando o popup feche seja mostrado na tela para o usuário poder visualizar, editar ou excluir. Esses dados serão pré visualizados na tela, para só então depois o usuário poder salvar todos os dados de uma só vez. Já estou com as tabelas relacionadas e criei um estado para armazenar o valor do input.

Minhas dúvidas são que não estou conseguindo mostrar esses dados salvos na tela, após clicar em inserir, e também não achei uma maneira de conseguir mostrar todos os cargos ou filiais após o usuário registra-las.

Por exemplo: O usuário pode cadastrar quantos cargos ele quiser, mas preciso que seja mostrado na tela um por um. Vou linkar uma foto para ilustrar.

Esse é o formulário de cadastro

Esse é o popup de cadastro de cargos

Esse é como deveria “printar” na tela

Obs: Esses dados não podem ainda ser salvo no banco de dados, pois não estão vinculados a uma empresa. Só após clicar em salvar é que irei cadastra-los.

Agradeço muito a atenção e ajuda!