Dynamic routes ReactJS

Here is the component to render routes:

import { useParams } from 'react-router-dom';
function Profile() {
  const { nickname } = useParams();

  return <h1> {nickname} Profile Page</h1>;
}

export default Profile;

Here is routes

import Home from '../pages/Home';
import Following from '../pages/Following';
import Profile from '../pages/Profile';
import Upload from '../pages/Upload';
import Search from '../pages/Search';
import { HeaderOnly } from '../layouts';
////

const publicRoutes = [
  {
    path: '/',
    component: Home,
  },
  {
    path: '/following',
    component: Following,
  },
  {
    path: '/@:nickname',
    component: Profile,
    layout: HeaderOnly,
  },
  {
    path: '/upload',
    component: Upload,
    layout: HeaderOnly,
  },
  {
    path: '/search',
    component: Search,
    layout: HeaderOnly,
  },
];

const privateRoutes = [];

export { privateRoutes, publicRoutes };

I want my Profile Component to be rendered when accessing /@mynickname. I am using dynamic router and when I try to access /@mynickname, it does not work, but if I access /@:nickname, it works.

How can I access /@mynickname and have my Profile Component rendered? Where did I go wrong?
localhost/@johndee -> johndee Profile Page