I'm working on a social media project with React on Rails and I have a NavBar component that manages the routing for each link. There's a link called Ventbox, similar to Twitter's Tweetbox, but instead of navigating to a new page at '/vent', I want it to pop up on the current page with the same endpoint. How can I modify my code to achieve this?

This is what my NavBar component looks like:

import React from 'react'
import { NavLink } from "react-router-dom";
import { navData } from "./navData.js";
import styles from "./styles/navbar.module.css";
import { useState } from "react";
import KeyboardDoubleArrowRightIcon from '@mui/icons-material/KeyboardDoubleArrowRight';
import KeyboardDoubleArrowLeftIcon from '@mui/icons-material/KeyboardDoubleArrowLeft';
import Ventbox from './Ventbox'
import CreateIcon from '@mui/icons-material/Create';

export default function NavBar() {

  const [open, setopen] = useState(false)
  
  

    const toggleOpen = () => {
        setopen(!open)
    }
  

    return (
      
      <div className={open?styles.sidenav:styles.sidenavClosed}>
          <button className={styles.menuBtn} onClick={toggleOpen}>
              {open? <KeyboardDoubleArrowLeftIcon />: <KeyboardDoubleArrowRightIcon />}
              </button>
          {navData.map(item =>{
            return <NavLink key={item.id} className={styles.sideitem} to={item.link}>
              {item.icon}
              <span className={styles.linkText}>{item.text}</span>
          </NavLink>
          })}
              <NavLink key={'ventbox'} className={styles.sideitem} to="/vent">
                <CreateIcon />
                <Ventbox to="/vent" style={styles.linkText} />
              </NavLink>
      </div>
    )
  }

And here's my Ventbox component:

import React, { useState } from "react";
import './styles/Ventbox.css'
import {useNavigate} from 'react-router-dom'


function Ventbox({style}) {
    
    const [popup,setPop] = useState(false);
    const [content, setContent] = useState("");
    const [textLimit, setTextLimit] = useState(250);
    

    const handleClickOpen = () => {
        setPop(!popup);
    }

    const closePopup = () => {
        setPop(false);
    }

    const handleChange = e => {
        setContent(e.target.value);
        setTextLimit(250 - e.target.value.length);
    }

    const handleSubmit = async e => {
        e.preventDefault();
        if (content.length > 250) {
            alert("Text limit reached");
        } else {
            try {
                const response = await fetch(`/posts`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ content: content })
                });
                const data = await response.json();
                console.log(data);
                
            } catch (error) {
                console.error(error);
            }
        }
    }

    return(
        <div>
            <span onClick={handleClickOpen} className={style}>Vent</span>
            <div>
                {
                    popup?
                    <div className="main">
                        <div className="popup">
                            <div className="popup-header">
                                <h1>What's on your mind?</h1>
                                <button className="delete-button" onClick={closePopup}>X</button>
                            </div>
                            <div>
                                <form onSubmit={handleSubmit}>
                                    <input className="textbox" placeholder="Enter text here" 
                                        value={content} 
                                        onChange={handleChange} 
                                        maxLength={250} 
                                    />
                                    <p>Characters remaining: {textLimit}</p>
                                    <button className="post-button"type="submit">Post</button>
                                </form>
                            </div>
                        </div>
                    </div>:""
                }
            </div>
        </div>
    )
}
export default Ventbox;

Lastly, here are the Icons and routes in my navData component:

import HomeIcon from '@mui/icons-material/Home';
import InfoIcon from '@mui/icons-material/Info';
import MenuBookIcon from '@mui/icons-material/MenuBook'; 
import AccountCircleIcon from '@mui/icons-material/AccountCircle';
import HowToRegIcon from '@mui/icons-material/HowToReg';
import VerifiedUserIcon from '@mui/icons-material/VerifiedUser';

import SendIcon from '@mui/icons-material/Send';
import NotificationsIcon from '@mui/icons-material/Notifications';
import CreateIcon from '@mui/icons-material/Create';
import Ventbox from './Ventbox'
import Popup from 'reactjs-popup'
import {useState} from 'react'


export const navData = [
    
    {
        id: 0,
        icon: <HomeIcon/>,
        text: "Home",
        link: "/"
    },
    {
        id: 1,
        icon: <AccountCircleIcon/>,
        text: "Profile",
        link: "/profile"
    },
    {
        id: 2,
        icon: <SendIcon/>,
        text: "Messages",
        link: "/messages"
    },
    {
        id: 3,
        icon: <NotificationsIcon/>,
        text: "Notifications",
        link: "/notifications"
    },

    {
        id: 5,
        icon: <HowToRegIcon/>,
        text: "Signup/Login",
        link: "/signin"
    },
]

If anyone could provide some guidance, it would be greatly appreciated!

I've tried various approaches but I seem to be stuck :(