updates references to the updated react documentation (react.dev) (#1058)

* update social media logos

* improve social media icons size

* Update Nav.module.css

* updates the official react references to the updated resources

---------

Co-authored-by: Refusado <[email protected]>
Co-authored-by: Beier (Bill) <[email protected]>

Author: refusado

src/components/UseFieldArrayContent.tsx

@@ -52,11 +52,11 @@ export default function UseFieldArrayContent({ api }: { api: any }) {
             identifier named <code>id</code> which is used for <code>key</code>{" "}
             prop. For more information why this is required:{" "}
             <a
-              href="https://reactjs.org/docs/lists-and-keys.html#keys"
+              href="https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key"
               target="_blank"
               rel="noopener noreferrer"
             >
-              https://reactjs.org/docs/lists-and-keys.html#keys
+              https://react.dev/learn/rendering-lists
             </a>
           </p>
           <p>
@@ -141,7 +141,7 @@ append({ firstName: 'bill', lastName: 'luo' }); ✅`}
         </li>
         <li>
           <p>
-            we do not support circular reference. Refer to this {" "}
+            we do not support circular reference. Refer to this{" "}
             <a
               href="https://github.com/react-hook-form/react-hook-form/issues/4055"
               target="_blank"

src/content/advanced-usage.mdx

@@ -303,7 +303,7 @@ export const App = () => {
 
 ## FormProvider Performance {#FormProviderPerformance}
 
-React Hook Form's [FormProvider](/docs/formprovider) is built upon [React's Context](https://reactjs.org/docs/context.html) API. It solves the problem where data is passed through the component tree without having to pass props down manually at every level. This also causes the component tree to trigger a re-render when React Hook Form triggers a state update, but we can still optimise our App if required via the example below.
+React Hook Form's [FormProvider](/docs/formprovider) is built upon [React's Context](https://react.dev/learn/passing-data-deeply-with-context) API. It solves the problem where data is passed through the component tree without having to pass props down manually at every level. This also causes the component tree to trigger a re-render when React Hook Form triggers a state update, but we can still optimise our App if required via the example below.
 
 **Note:** Using React Hook Form's [Devtools](/dev-tools) alongside [FormProvider](/docs/formprovider) can cause performance issues in some situations. Before diving deep in performance optimizations, consider this bottleneck first.
 

src/content/faqs.mdx

@@ -12,7 +12,8 @@ Performance is one of the primary reasons why this library was created. React Ho
 
 ## How to create an accessible input error and message? {#Howtocreateanaccessibleinputerrorandmessage}
 
-React Hook Form is based on [Uncontrolled Components](https://reactjs.org/docs/uncontrolled-components.html), which gives you the ability to easily build an accessible custom form.
+React Hook Form is based on Uncontrolled Components, which gives you the ability to easily build an accessible custom form.
+_(For more information about Uncontrolled Components, read [Sharing State Between Components](https://react.dev/learn/sharing-state-between-components))_
 
 ```javascript copy
 import React from "react"