Issue with Sharing URL on LinkedIn in React App

Question

Hello Stack Overflow Community,

I am developing a React application and facing an issue with sharing a URL on LinkedIn. My application has two main components: App.jsx and Share.jsx. In Share.jsx, I have an anchor tag for sharing a link to LinkedIn. However, when I click the anchor, it redirects me to LinkedIn, but the URL I want to share does not seem to work properly. I am unsure what I might be doing wrong.

Here is the relevant code:

App.jsx:

import Share from './components/Share';
import {
  BrowserRouter as Router,
  Routes,
  Route,
  Link,
} from 'react-router-dom';

function App() {
  return (
    <Router>
      <h1>Hello React World</h1>
      <Link to="/share">Share</Link>
      <Routes>
        <Route path="/share" element={<Share />} />
      </Routes>
    </Router>
  )
}

export default App;

Share.jsx*

const Share = () => {
  let url = encodeURIComponent("https://superlative-bunny-c61262.netlify.app/share");

  return (
    <div>
      <h2>Share Social</h2>
      <a target='_blank' className='c-black' rel="noreferrer" href={`https://www.linkedin.com/sharing/share-offsite/?url=${url}`}>
        Share on LinkedIn
      </a>
    </div>
  );
};

export default Share;

The URL I am trying to share is https://superlative-bunny-c61262.netlify.app/share. When I click on "Share on LinkedIn", it does redirect to LinkedIn, but the URL is not shared as expected.

I have tried searching for similar issues and solutions but haven't found anything that resolves my problem. I would greatly appreciate any insights or suggestions on what might be going wrong and how to fix it.

Thank you in advance for your help!