clerk Authentication afterSignOutUrl property not known typescript error in React

Question

i was trying to integrate clerk authentication to my react-typescript website created using vite, but i am having trouble with the property afterSignOutUrl giving errors.i have tried to follow the docs correctly to implement it.

here is the code

import { useState } from "react";
import { SignInButton, SignOutButton, SignedIn, SignedOut } from "@clerk/clerk-react";

import "./App.css";

function App() {

  return (
    <>
      <SignedOut>
        <SignInButton />
        <p>This content is public. Only signed out users can see this.</p>
      </SignedOut>
      <SignedIn>
        <SignOutButton afterSignOutUrl="/" />
        <p>This content is private. Only signed in users can see this.</p>
      </SignedIn>
    </>
    );
  }
  
  export default App;

here is what the error says in vscode

Type '{ afterSignOutUrl: string; }' is not assignable to type 'IntrinsicAttributes & Omit<PropsWithChildren<WithClerkProp<SignOutButtonProps>>, "clerk">'.
  Property 'afterSignOutUrl' does not exist on type 'IntrinsicAttributes & Omit<PropsWithChildren<WithClerkProp<SignOutButtonProps>>, "clerk">'.ts(2322)
(property) afterSignOutUrl: string

here is what the error says in browser's console

chunk-ZKMK3N6I.js?v=d42226ec:519 
Warning: React does not recognize the `afterSignOutUrl` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `aftersignouturl` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    at button
    at http://localhost:5173/node_modules/.vite/deps/@clerk_clerk-react.js?v=d42226ec:4187:6
    at LoadedGuarantee (http://localhost:5173/node_modules/.vite/deps/@clerk_clerk-react.js?v=d42226ec:2514:26)
    at HOC (http://localhost:5173/node_modules/.vite/deps/@clerk_clerk-react.js?v=d42226ec:2527:19)
    at SignedIn (http://localhost:5173/node_modules/.vite/deps/@clerk_clerk-react.js?v=d42226ec:3974:19)
    at App (http://localhost:5173/src/App.tsx:23:29)
    at SWRConfig (http://localhost:5173/node_modules/.vite/deps/@clerk_clerk-react.js?v=d42226ec:1174:11)
    at OrganizationProvider (http://localhost:5173/node_modules/.vite/deps/@clerk_clerk-react.js?v=d42226ec:1938:3)
    at ClerkContextProvider (http://localhost:5173/node_modules/.vite/deps/@clerk_clerk-react.js?v=d42226ec:3658:11)
    at ClerkProviderBase (http://localhost:5173/node_modules/.vite/deps/@clerk_clerk-react.js?v=d42226ec:3730:11)
    at Hoc (http://localhost:5173/node_modules/.vite/deps/@clerk_clerk-react.js?v=d42226ec:614:5)
printWarning @ chunk-ZKMK3N6I.js?v=d42226ec:519
error @ chunk-ZKMK3N6I.js?v=d42226ec:503
validateProperty$1 @ chunk-ZKMK3N6I.js?v=d42226ec:3425
warnUnknownProperties @ chunk-ZKMK3N6I.js?v=d42226ec:3457
validateProperties$2 @ chunk-ZKMK3N6I.js?v=d42226ec:3476
validatePropertiesInDevelopment @ chunk-ZKMK3N6I.js?v=d42226ec:7347
setInitialProperties @ chunk-ZKMK3N6I.js?v=d42226ec:7538
finalizeInitialChildren @ chunk-ZKMK3N6I.js?v=d42226ec:8354
completeWork @ chunk-ZKMK3N6I.js?v=d42226ec:16280
completeUnitOfWork @ chunk-ZKMK3N6I.js?v=d42226ec:19218
performUnitOfWork @ chunk-ZKMK3N6I.js?v=d42226ec:19200
workLoopSync @ chunk-ZKMK3N6I.js?v=d42226ec:19131
renderRootSync @ chunk-ZKMK3N6I.js?v=d42226ec:19110
performConcurrentWorkOnRoot @ chunk-ZKMK3N6I.js?v=d42226ec:18672
workLoop @ chunk-ZKMK3N6I.js?v=d42226ec:195
flushWork @ chunk-ZKMK3N6I.js?v=d42226ec:174
performWorkUntilDeadline @ chunk-ZKMK3N6I.js?v=d42226ec:382
Show 17 more frames
Show less

Answer 1

well, the docs is incorrect i guess, because it seems that afterSignOutUrl proper only exists on UserButton component