switch component modal to link component?

I’m new to the world of react, and I have a little problem here that I can’t solve. I’m creating some screens and I identified myself with the chakra ui component of react. and I currently have the App.jsx and ModalComp files. It’s basically a form with a CRUD, but I need to click on the “edit” and “insert” options to open a new tab in the browser and a pop-up is opening and I can’t solve it the way I did it. can anybody help me? Here is the App.jsx file:

    import { EditIcon, DeleteIcon, SearchIcon } from "@chakra-ui/icons";
import {
  Box,
  Flex,
  Button,
  useDisclosure,
  Table,
  Thead,
  Tr,
  Stack,
  InputLeftElement,
  Th,
  Tbody,
  Td,
  useBreakpointValue,
  Input,
  InputGroup,
  Link
} from "@chakra-ui/react";
import { useEffect, useState } from "react";
import { Navbar } from "react-bootstrap";
import ModalComp from "./components/ModalComp";
import Novalogo from "./Novalogo.png"
import { FiFile, FiFilter } from "react-icons/fi"

const App = () => {
  const { isOpen, onOpen, onClose } = useDisclosure();
  const [data, setData] = useState([]);
  const [dataEdit, setDataEdit] = useState({});
  const [searchText, setSearchText] = useState("");
  const image = new Image();
  image.src = Novalogo

  const isMobile = useBreakpointValue({
    base: true,
    lg: false,
  });

  useEffect(() => {
    const db_costumer = localStorage.getItem("cad_esfera")
      ? JSON.parse(localStorage.getItem("cad_esfera"))
      : [];

    setData(db_costumer);
  }, [setData]);

  const handleRemove = (nome) => {
    const newArray = data.filter((item) => item.nome !== nome);

    setData(newArray);

    localStorage.setItem("cad_esfera", JSON.stringify(newArray));
  };

  const filteredData = data.filter((item) => {
    if (searchText === "") return true;
    return item.nome.toLowerCase().includes(searchText.toLowerCase());
  });

  return (


    <Flex
      h="100vh"
      align="center"
      justify="center"
      fontSize="20px"
      fontFamily="arial"
      bgGradient="linear(to-r, gray.100, gray.100)"
    >
      <Flex direction={"column"}>
        <Navbar />
      </Flex>

      <div>
        <Flex align="center" py={8} px={8}>
          <img src={image.src} alt="Logo" style={{ position: 'fixed', top: 0, left: 0, width: '60px', height: '60px' }} />
          {/* outras opções da barra */}
        </Flex>
      </div>

      <Box maxW={1000} w="100%" h="80vh" py={5} px={2} mt={-5} ml={-20}
        boxShadow="lg"
        borderRadius="lg"
        bg="white">
        < Box py={2} px={2} fontSize="28px" pt={9} mt={-5} mb={5} fontFamily={"Arial Narrow"}>
          Esferas
        </Box>

        <Box py={2} px={2} fontSize="18px" fontFamily={"system-ui"}>
            <Button
              colorScheme="telegram"
              width={400} fontSize="15px"
              mt={-10} onClick={() => [setDataEdit({}), onOpen()]}>
              <Flex align="center">
                <FiFile size={18} color="#6c77db" fill="White" />
                <Box ml={2}>

                  Nova Esfera
                </Box>
              </Flex>
            </Button>


          <Box bg="blue.100" p={2} mb={0.5} borderRadius={"10px"} color={"#1b18ad"} align={"Left"} >
            <Flex align="center">
              <FiFilter size={18} color="#024d43" fill="#024d43" />
              <Box ml={2} color="#024d43">
                Filtros para Pesquisa
              </Box>
            </Flex>
          </Box>
          <Stack>
            <InputGroup>
              <InputLeftElement pointerEvents="none" children={<SearchIcon />} />
              <Input
                type={"text"}
                variant='filled'
                placeholder={"Digite todo ou parte do nome para filtrar..."}
                fontFamily={"verdana"}
                value={searchText}
                onChange={(e) => setSearchText(e.target.value)} />

            </InputGroup>
          </Stack>
        </Box>

        <Box maxW={1500} w="100%" h="80vh" py={10} px={2} >

          <Box overflowY="auto" height="100%" ml={-4} mr={-4} >
            <Table mt="-2">
              <Thead>
                <Tr>
                  <Th maxW={isMobile ? 4 : 20} fontSize="15px" textTransform={"capitalization"} width={10}  >
                    Id
                  </Th>
                  <Th maxW={isMobile ? 4 : 20} fontSize="15px" textTransform={"capitalization"}>
                    Nome
                  </Th>
                  <Th maxW={isMobile ? 4 : 20}
                    p={0}
                    width={10}
                    align="center"
                    fontSize="15px"
                    textTransform={"capitalization"}>
                    Ações
                  </Th>
                  <Th maxW={isMobile ? 4 : 20} p={0} ></Th>
                </Tr>
              </Thead>
              <Tbody>
                {data
                  .filter(({ nome }) => nome.toLowerCase().includes(searchText.toLowerCase()))
                  .map(({ ID, nome }, index) => (
                    <Tr key={index} cursor="pointer" _hover={{ bg: "blue.100" }} fontSize="15px">
                      <Td maxW={isMobile ? 5 : 100}>{ID}</Td>
                      <Td
                        color={"#070861b9"}
                        textDecoration="underline"
                        onClick={() => [
                          setDataEdit({ ID, nome, index }),
                          onOpen(),
                        ]} maxW={isMobile ? 5 : 100}>
                        {nome}
                      </Td>

                      <Td p={0}>
                        <EditIcon
                          fontSize={20}
                          onClick={() =>
                            [setDataEdit({ ID, nome, index }),
                            onOpen(),
                            ]}
                        />
                      </Td>
                      <Td p={0}>
                        <DeleteIcon
                          fontSize={20}
                          onClick={() => handleRemove(nome)}
                        />
                      </Td>
                    </Tr>
                  ))}

              </Tbody>
            </Table>
          </Box>
        </Box>
        {isOpen && (
          <ModalComp
            isOpen={isOpen}
            onClose={onClose}
            data={data}
            setData={setData}
            dataEdit={dataEdit}
            setDataEdit={setDataEdit}
          />
        )}
      </Box>
    </Flex >
  );
};


export default App;

and just below the ModalComp.jsx file:

import {
  Modal,
  ModalOverlay,
  ModalContent,
  ModalHeader,
  ModalFooter,
  ModalBody,
  ModalCloseButton,
  Button,
  FormControl,
  FormLabel,
  Input,
  Box,
} from "@chakra-ui/react";
import { useState } from "react";
import { Link } from "react-router-dom";

const ModalComp = ({ data, setData, dataEdit, isOpen, onClose }) => {
  const [ID] = useState(dataEdit.ID || "");
  const [nome, setNome] = useState(dataEdit.nome || "");

  const handleSave = () => {
    if (!nome) return;

    if (nomeAlreadyExists()) {
      return alert("Esfera já cadastrada!");
    }

    const newId = data?.length ? +data[data.length - 1].ID + 1 : 1;

    if (Object.keys(dataEdit).length) {
      data[dataEdit.index] = { ID: dataEdit.ID, nome };
    }

    const newDataArray = !Object.keys(dataEdit).length
      ? [...(data ? data : []), { ID: newId, nome }]
      : [...(data ? data : [])];

    localStorage.setItem("cad_esfera", JSON.stringify(newDataArray));

    setData(newDataArray);

    onClose();
  };

  const nomeAlreadyExists = () => {
    if (dataEdit.nome !== nome && data?.length) {
      return data.find((item) => item.nome === nome);
    }

    return false;
  };

  return (
    <>
      <Modal isOpen={isOpen} onClose={onClose}>
        <ModalOverlay />
        <ModalContent>
          <ModalHeader>Esfera</ModalHeader>
          <ModalCloseButton />
          <ModalBody>
            <FormControl display="flex" flexDir="column" gap={4}>


              <Box>
                <FormLabel>Nome</FormLabel>
                <Input
                  type="nome"
                  value={nome}
                  onChange={(e) => setNome(e.target.value)}
                />
              </Box>
            </FormControl>
          </ModalBody>

          <ModalFooter justifyContent="start">
            <Button colorScheme="green" mr={3} onClick={handleSave}>
              SALVAR
            </Button>
            <Button colorScheme="red" onClick={onClose}>
              CANCELAR
            </Button>
          </ModalFooter>
        </ModalContent>
      </Modal>
    </>
  );
};

export default ModalComp;

I would like to modify it so that when I click on “new sphere” and on the edit option that is in the “editicon” and in the “name” component, it loads a tab in the browser and not in a pop-up, as is happening.